import { Component, Input, Output, EventEmitter } from "@angular/core";
import { ApiService } from "./api.service";

@Component({
  selector: "app-form",
  template: `
    <form #form novalidate (ngSubmit)="handleSubmit(form.value, form.valid)">
      <input type="text" name="name" #name="ngModel" required [ngModel]="object?.name>

      <div *ngIf="name.errors?.required && name.dirty">Name is required</div>

      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  `,
})
export class AppComponent {
  @Input() object: User;
  @Output() update: EventEmitter<User> = new EventEmitter<User>();

  handleSubmit(formData: User, isValid: boolean) {
    if (isValid) {
      this.update.emit(formData);
    }
  }
}