web-dev-qa-db-ja.com

ラジオボタン用のAngular2 Reactive Forms formControl

リアクティブフォームを使用してAngularにフォームを構築しています。 FormBuilderを使用してフィールドのグループを作成しています。テキストボックスの場合、これは非常にうまく機能します。しかし、ラジオボタンのformControlが見つかりません。

これはどのように作動しますか？テキスト入力で使用するのと同じように<input formControlName="gender" type="radio">を使用する必要がありますか？

angularangular-reactive-formsangular-forms
35
Mike Bovenlander

テキスト入力の場合と同じように<input formControlName="gender" type="radio">を行う必要がありますか？

はい。

これはどのように作動しますか？

フォーム制御ディレクティブは、ControlValueAccessorディレクティブを使用してネイティブ要素と通信します。可能な入力ごとにControlValueAccessorsの異なるタイプがあります。値アクセサディレクティブのselectorによって正しいものが選択されます。セレクタは、typeが<input>であることに基づいています。 type="radio"がある場合、無線の値アクセサーが使用されます。

32
Paul Samsotha

コンポーネントで、フォームの一部としてラジオボタンを定義します。

export class MyComponent {
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      gender: ""
    });
  }
}

コンポーネントHTMLで、フォームを構築します。

<div class="form-group">
  <label>Please select your gender</label>
  <div class="row">
    <label class="md-check">
      <input type="radio" value="female" name="gender" formControlName="gender">
      Female
    </label>

    <label class="md-check">
      <input type="radio" value="male" name="gender" formControlName="gender">     
      Male
    </label>
  </div>
</div>

ここでは示していませんが、送信ボタンを使用してフォーム全体を作成する方法を知っていると思います。

フォームが送信されると、次のラジオボタンの値を取得できます。

let genderValue = this.form.value.gender;

これは、チェックされているラジオボタンに応じて、「女性」または「男性」になります。

これがお役に立てば幸いです。幸運を！

35
Chang

私が気づいたリアクティブフォームについて追加する小さなもの。値が整数の場合、文字列に変更する必要があります。そうしないと、ラジオボタンが選択されません。

  this.jobForm = this._fb.group({
                    id: [res["job"]["id"]],
                    job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required],
                    title: [res["job"]["title"],Validators.required]
                });
6
Cliff

Angular Material controls は、（ほぼ）現在使用できるほど成熟しています。

サンプルでは主にngModelを使用していますが、formControlNameを使用して行う方法は次のとおりです。

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem">
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button>
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button>
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button>
</mat-radio-group>

angular/flex-layout を使用して、ボタンを縦列に配置しています。

（定数の場合はvalue='Blue'、モデルプロパティを参照する場合は[value]="blueColorName"も実行できます。

0には問題があるかもしれないと思う.

2
Simon_Weaver