ng-form.component.ts

@Component({
  template: `
    <form #form="ngForm" (submit)="onSubmit(form)">
      <input type="text" name="name" [(ngModel)]="controls.name" />
      <input type="email" name="email" [(ngModel)]="controls.email" />
      <input type="number" name="age" [(ngModel)]="controls.age" />
      <button type="submit">Submit</button>
    </form>
  `,
})
export class FormComponent {
  private readonly userService = inject(UserService);
  controls = {
    name: signal(''),
    email: signal(''),
    age: signal(0),
  };

  onSubmit(form: NgForm) {
    // we can find out everything
    // about the form
    if (form.valid) {
      this.userService.addUser(form.value);
    }
  }
}