form-submit.component.ts

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

    onSubmit() {
        const value = {
            name: this.form.name(),
            email: this.form.email(),
            age: this.form.age(),
        };

        this.userService.addUser(value);
    }
}

// do this:
@Component({
  template: `
    <form #form="ngForm" (submit)="onSubmit(form.value)">
      <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 SubmitComponent {
  private readonly userService = inject(UserService);
  controls = {
    name: signal(''),
    email: signal(''),
    age: signal(0),
  };

  onSubmit(value: User) {
    this.userService.addUser(value);
  }
}