Difference between #form="ngForm" and [ngFormModel]="form"?

Question

What is the difference between the two:

<form #form="ngForm">

And

<form [ngFormModel]="form">

When do you use one over the other?

Answer 1

The first strategy is a 'template-driven' form: Angular will add an implicit directive to the form and you add validators mostly declaratively in the template, and so the name 'template-driven'. For example this is how to add a validator saying that the field is required:

<form #form="ngForm">
    <input name="firstName" required [(ngModel)]="formModel">
</form>

Here we have used the required attribute, and Angular via an implicit directive has configured the required Validator. This type of form is very well-suited to be used with ng-model, and ideal for migrating Angular 1 forms to Angular 2.

The second strategy is a 'model-driven' form. Here we don't declare validators on the template, instead we declare control names:

<form [formGroup]="form">
    <input name="firstName" formControlName="firstName">
</form>

Then, all the validation logic is declared via code and not in the template. Also we can subscribe to the form as an Observable and use functional reactive programming techniques. For example:

@Component({
    selector: "some-component",
    templateUrl: 'model-driven-form.html'
})
export class ModelDrivenForm {
    form: FormGroup;
    firstName = new FormControl ("", Validators.required);
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            "firstName":["", Validators.required]
        });
        this.form.valueChanges
        .subscribe((formValue) => {
            console.log(formValue);
        });
    }
}

This also works with NgModel but as we see it would not be needed, because we already can obtain the the value of the form via the form control.

So choosing between both depends a lot on the use case:

• if migrating an existing form, consider NgModel + option 1
• if building a new form and want to try functional reactive programming techniques, consider the formGroup option 2
• as mentioned before, NgModel works also with option 2. So you can combine defining the validators via code and obtain the form values via NgModel. You are not forced to used functional reactive programming techniques with formGroup, although definitively give it a try, its very powerful

P.S. See more on new forms in Angular2 here

Answer 2

With the first strategy you define a control for your form inline. For simple validation, this approach is enough. Implicitly the NgForm directive is applied to <form> element. You can use local variables to either reference the HTML element or a specific directive apply on it. In your case, it's a directive. This allows you then to use the local variable in expression:

<form #form="ngForm">
  <button type="submit" [disabled]="!ngForm.valid">Submit</button>
</form>

With the other one you refer a control that is defined using the FormBuilder class in the component class, as described below:

export class DetailsComponent {
  constructor(builder:FormBuilder) {
    this.companyForm = builder.group({
      name: ['', Validators.required,  
         createUniqueNameValidator(service,this)],
      tags: ['', notEmptyValidator],
      addressStreet: ['', Validators.required],
      addressZipCode: ['', Validators.compose([ Validators.required, 
               zipCodeValidator ])],
      addressCity: ['', Validators.required]
    });
  }
}

The second approach is more advanced and allows to register custom validators, asynchronous validators and compose them (see Validators.compose) for form elements.

Hope it helps you, Thierry