Я использую ReactiveFormsModule
Angular2 для создания компонента, содержащего форму. Вот мой код:
foo.component.ts :
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'fullname': ['', Validators.required],
'gender': []
});
}
foo.component.html (с [formControl]
):
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" [formControl]="myForm.controls.fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Female</label>
</div>
</div>
</div>
foo.component.html (с formControlName
):
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" formControlName="fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
<label>Female</label>
</div>
</div>
</div>
Оба способа работают. Но я не могу понять, в чем разница между использованием [formControl]
и formControlName
.
Ответы:
Я считаю, что вы упустили важный момент:
[formGroup]
директиву во втором примере.formControlName
используется вместе с[formGroup]
для сохранения формы множественной точечной навигации. Например:Эквивалентно:
А теперь представьте вложенные
FormGroups
:)источник
[formControl]
вызывает проблему приform.valid
проверке с помощью formGroup, любые комментарии[formControl]
назначает ссылку наFormControl
созданный вами экземплярFormControlDirective
.formControlName
назначает строку модулю форм для поиска элемента управления по имени.Если вы создаете переменные для элементов управления, вам также не нужны
.
упомянутые Гарри, но я также предлагаю использовать[formGroup]
вместо них, потому что с более сложными формами это может стать беспорядочным.источник
Существует 3-я эквивалентность двух, представленных в принятом ответе, а именно (не рекомендуется):
Обратите внимание, что мы все еще используем директиву [formGroup].
Однако, чтобы этот шаблон скомпилировался без ошибок, ваш компонент должен объявить элементы управления как AbstractControls, а не FormControls:
myComponent.ts
Однако обратите внимание, что объявлять AbstractControls не рекомендуется , поэтому, если вы получите сообщение об ошибке
Cannot find control with unspecified name attribute
, вероятно, вы смешали стили или объявили свои элементы управления как AbstractControls.источник
Из документации Angular ( https://angular.io/guide/reactive-forms ):
Составная часть
Шаблон
источник
with
[formControl]
вы можете использовать преимущества реактивного программирования, потому что уFormControl
него есть свойство с именемvalueChanges
(я знаю это прямо сейчас, может быть, его больше), которое возвращает объект, наObservable
который вы можете подписаться и использовать его. (например, это очень полезно в сценариях регистрации, которые вы хотите проверить, чтобы входное электронное письмо не повторялось, как только пользователь изменит значение)источник