formControlNameとFormControlの違いは何ですか？

私が使用している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]、2番目の例のディレクティブを逃したと思います。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 名前でコントロールを検索するためにフォームモジュールに文字列を割り当てます。

コントロールの変数を作成する場合は、.Harryが述べたようにも必要ありませんが、[formGroup]より複雑なフォームを使用すると混乱する可能性があるため、代わりに使用することもお勧めします。

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

受け入れられた回答で提供されている2つに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]ディレクティブをまだ使用していることに注意してください。

ただし、このテンプレートをエラーなしでコンパイルするには、コンポーネントがコントロールをFormControlsではなくAbstractControlsとして宣言する必要があります。

myComponent.ts

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

ただし、AbstractControlsの宣言は推奨されていないため、エラーが発生しCannot find control with unspecified name attributeた場合は、スタイルが混在しているか、コントロールをAbstractControlsとして宣言している可能性があります。

Angular docs（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あなたはそれを購読して使用することができました。（たとえば、ユーザーが値を変更した直後に入力メールが繰り返されないようにチェックする必要がある登録シナリオでは非常に便利です）