web-dev-qa-db-ja.com

Angular 5リアクティブフォーム-ラジオボタングループ

2つのラジオボタンがあり、リアクティブフォームを使用しており、コンポーネント内にフォームコントロールを追加しています。私が直面している問題は、name属性がformControlNameと同じでなければならないということです。 name属性を同じものとして設定すると、選択できるラジオボタンは1つだけになります。他のボタンを選択解除して選択することはできません。同じもののみを選択できます。

this.genderControl = new FormControl("", Validators.required);

そして、フォームグループに追加しました

genderControl: this.genderControl,

私のHTML：

<div class="radio-inline">
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label"> Male</label>
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label">Female</label>
</div>

フォームグループ

    this.personalInfo = new FormGroup({
  searchControl: this.searchControl,
  titleControl: this.titleControl,
  firstNameControl: this.firstNameControl,
  middleNameControl: this.middleNameControl,
  lastNameControl: this.lastNameControl,
  birthdayControl: this.birthdayControl,
  genderControl: this.genderControl,
  phoneControl: this.phoneControl,
  taxCanadaControl: this.taxCanadaControl,
  provinceControl: this.provinceControl,
  countryControl: this.countryControl,
  taxCountryControl: this.taxCountryControl,

  creditControl: this.creditControl
});
angularangular5angular-reactive-forms
19
Taranjit Kang

コードを試しましたが、formControlNameに値を割り当て/バインドしませんでした。

HTMLファイル内：

<form [formGroup]="form">
   <label>
     <input type="radio" value="Male" formControlName="gender">
       <span>male</span>
   </label>
   <label>
     <input type="radio" value="Female" formControlName="gender">
       <span>female</span>
   </label>
</form>

TSファイル内：

  form: FormGroup;
  constructor(fb: FormBuilder) {
    this.name = 'Angular2'
    this.form = fb.group({
      gender: ['', Validators.required]
    });
  }

Reactiveフォームを適切に使用していることを確認してください：[formGroup]="form"、name属性は必要ありません。

私のサンプルで。スパンタグ内の単語maleおよびfemaleはラジオボタンに沿って表示される値であり、MaleおよびFemaleの値はformControlNameにバインドされます

スクリーンショットを参照してください： enter image description here

短くするには：

<form [formGroup]="form">
  <input type="radio" value='Male' formControlName="gender" >Male
  <input type="radio" value='Female' formControlName="gender">Female
</form>

enter image description here

それが役に立てば幸い：）

46
Haifeng Zhang