45

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

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

4

6 に答える 6

41

<input formControlName="gender" type="radio">テキスト入力の場合と同じようにすべきですか？

はい。

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

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

于 2016-10-10T11:57:10.160 に答える
40

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

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;

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

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

于 2016-10-10T15:47:05.693 に答える
6

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

  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]
                });
于 2016-12-21T07:57:03.293 に答える