Angular 5 Reactive Forms – 单选按钮组

我有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
});

我尝试了你的代码,你没有为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属性.

在我的样本中. span标签中的单词男性和女性是沿单选按钮显示的值,并且Male和Female值绑定到formControlName

看截图：

为了缩短它：

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

希望能帮助到你：)

Angular 5 Reactive Forms – 单选按钮组

猜你在找的Angularjs相关文章