Hva er forskjellen mellom template-driven og reactive forms?

// just import FormsModule; minimal TS

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <input name="email" ngModel required email />   <!-- ngModel registers the field -->
  <input name="password" ngModel required minlength="8" />
  <button [disabled]="f.invalid">Submit</button>
</form>

import { FormBuilder, Validators } from "@angular/forms";

export class SignupComponent {
  constructor(private fb: FormBuilder) {}

  form = this.fb.group({
    email: ["", [Validators.required, Validators.email]],
    password: ["", [Validators.required, Validators.minLength(8)]],
  });

  onSubmit() {
    if (this.form.valid) console.log(this.form.value);
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email" />
  <input formControlName="password" type="password" />
  <button [disabled]="form.invalid">Submit</button>
</form>

                  Template-driven        Reactive
Where defined     HTML (ngModel)         TypeScript (FormBuilder)
Form model        implicit/async         explicit, synchronous object
Validation        directives in template validators in code
Dynamic forms     hard                   easy (add/remove controls in code)
Testability       harder                 straightforward (it's just an object)
Best for          simple forms           complex/dynamic/validated forms

this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check