У чому різниця між formControlName та FormControl?

Я використовую ReactiveFormsModuleAngular2 для створення компонента, який містить форму. Ось мій код:

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]щоб зберегти у формі кілька крапкових навігацій. Наприклад:

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

Це еквівалентно:

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

А тепер уявіть собі вкладене FormGroups:)

[formControl]призначає посилання на FormControlекземпляр, який ви створили, на FormControlDirective.

formControlName призначає рядок для модуля форм для пошуку елемента керування за іменем.

Якщо ви створюєте змінні для елементів керування, вам також не потрібне те ., що згадував Гаррі, але я б також запропонував використовувати [formGroup]замість цього, оскільки при більш складних формах це може стати брудним.

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

Існує 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.ts

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

Однак зауважте, що оголошувати AbstractControls не рекомендується , тому, якщо ви отримуєте помилку, Cannot find control with unspecified name attributeто, ймовірно, ви змішали стилі або оголосили свої елементи керування як AbstractControls.

З документів Angular ( 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містить групу елементів керування, profileForm FormGroupприв'язаний до елемента форми з FormGroup директивою, створюючи рівень зв'язку між моделлю та формою, що містить входи. formControlNameВведення передбачена FormControlNameдиректива пов'язує кожен окремий вхід для контролю форми , певний вFormGroup

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