В чем разница между formControlName и FormControl?

я использую ReactiveFormsModule Angular2 для создания компонента, содержащего форму. Вот мой код:

foo.деталь.ТС:

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.деталь.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.деталь.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.

38
angular angular2-formbuilder angular2-forms form-control radio-button

5 ответов

Я считаю, что вы упустили важный момент:

66

[formControl] присваивает ссылку на FormControl экземпляр, который вы создали в FormControlDirective.

formControlName назначает строку для модуля forms для поиска элемента управления по имени.

если вы создаете переменные для элементов управления, вы не нужны . как упоминалось Гарри, но я бы также предложил использовать [formGroup] вместо этого, потому что с более сложными формами это может стать грязным.

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('', Validators.required);
    this.gender = new FormControl('');
    this.myForm = fb.group({
        'fullname': this.fullName,
        'gender': this.gender
    });
}
11

существует 3-я эквивалентность двум, приведенным в принятом ответе ,который является следующим (Не рекомендуется):

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

обратите внимание, что мы все еще используем директиву [formGroup].

однако для компиляции этого шаблона без ошибок ваш компонент должен объявить элементы управления как AbstractControls, а не FormControls:

компонент MyComponent.ТС

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl
, пожалуйста, обратите внимание, что объявление AbstractControls составляет не рекомендовано, так что если вы получаете ошибку Cannot find control with unspecified name attribute тогда, вероятно, вы смешали стили или объявили свои элементы управления как AbstractControls.
1

С [formControl] вы можете использовать преимущества реактивного программирования, потому что FormControl есть свойство с именем valueChanges (Я знаю это сейчас, может быть, есть больше, чем это), который возвращает Observable что вы можете подписаться и использовать его. (например, это очень полезно в сценариях регистрации, которые вы хотите проверить входную электронную почту, чтобы не повторяться, как только пользователь изменит значение)

0

из угловых документов (https://angular.io/guide/reactive-forms):

компонент

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

шаблон

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

обратите внимание, что так как FormGroup содержит группу элементов управления, форму профиль FormGroup привязан к элементу формы с FormGroup директива, создание коммуникационного уровня между моделью и форма, содержащая входные данные. The formControlName вход предоставлено FormControlName директива связывает каждый отдельный вход в форму управление определено в FormGroup

0