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

Ответ 1

Первая стратегия - это форма с шаблоном: 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>

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

@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 здесь

Ответ 2

С помощью первой стратегии вы определяете элемент управления для своей встроенной формы. Для простой проверки этого подхода достаточно. Неявно директива 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) для элементов формы.

Надеюсь, это поможет вам, Thierry