Разница между #form=ngForm и [ngFormModel]=form?

Первая стратегия — это форма, «управляемая шаблоном»: Angular добавит неявную директиву в форму, и вы добавите валидаторы в основном декларативно в шаблон, поэтому название «управляемая шаблоном». Например, вот как добавить валидатор, говорящий, что поле обязательно:

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

Здесь мы использовали требуемый атрибут, а Angular через неявную директиву настроил требуемый валидатор. Этот тип формы очень хорошо подходит для использования с ng-моделью и идеально подходит для переноса форм Angular 1 на Angular 2.

Вторая стратегия - это форма, основанная на модели. Здесь мы не объявляем валидаторы в шаблоне, вместо этого мы объявляем имена элементов управления:

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

Затем вся логика проверки объявляется в коде, а не в шаблоне. Также мы можем подписаться на форму как Observable и использовать методы функционального реактивного программирования. Например:

@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);
        });
    }
}

Это также работает с NgModel, но, как мы видим, в этом нет необходимости, потому что мы уже можем получить значение формы через элемент управления формы.

Таким образом, выбор между обоими во многом зависит от варианта использования:

• при переносе существующей формы рассмотрите NgModel + вариант 1
• если вы создаете новую форму и хотите попробовать методы функционального реактивного программирования, рассмотрите formGroup вариант 2
• как упоминалось ранее, NgModel работает также с вариантом 2. Таким образом, вы можете комбинировать определение валидаторов с помощью кода и получение значений формы с помощью NgModel. Вы не обязаны использовать методы функционального реактивного программирования с formGroup, хотя обязательно попробуйте, это очень мощно.

P.S. Узнайте больше о новых формах в Angular2 здесь

В первой стратегии вы определяете встроенный элемент управления для формы. Для простой проверки этого подхода достаточно. Неявно директива NgForm применяется к элементу <form>. Вы можете использовать локальные переменные либо для ссылки на элемент HTML, либо для применения к нему определенной директивы. В вашем случае это директива. Это позволяет вам затем использовать локальную переменную в выражении:

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

С другим вы ссылаетесь на элемент управления, который определен с использованием класса FormBuilder в классе компонента, как описано ниже:

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]
    });
  }
}

Второй подход более продвинутый и позволяет регистрировать собственные валидаторы, асинхронные валидаторы и составлять их (см. Validators.compose) для элементов формы.

Надеюсь, это поможет вам, Тьерри.