web-dev-qa-db-ja.com

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

Angular2のReactiveFormsModuleを使用して、フォームを含むコンポーネントを作成しています。ここに私のコードがあります：

foo.component.ts：

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

foo.component.html（with [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の使用の違いを理解することはできません。

angularradio-buttonangular2-formsform-controlangular2-formbuilder
65
smartmouse

重要なポイントを見逃したと思います：2番目の例の[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を想像してください:)

115
Harry Ninh

[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
    });
}
16
Günter Zöchbauer

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

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

myComponent.ts

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

ただし、AbstractControlsの宣言は 非推奨 であるため、エラーCannot find control with unspecified name attributeが表示される場合は、スタイルを混在させているか、コントロールをAbstractControlsとして宣言している可能性が高いことに注意してください。

4
rmcsharry

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で定義されたフォームコントロールにバインドします

1
Chris Halcrow

[formControl]を使用すると、FormControlにはvalueChangesという名前のプロパティがあるので、リアクティブプログラミングの利点を使用できます（これは今知っていますが、おそらくそれ以上あります）。Observableをサブスクライブして使用できます。 （たとえば、ユーザーが値を変更するとすぐに繰り返されないように入力メールをチェックする登録シナリオで非常に便利です）

0
Seyed Ali Roshan