Angular 5 Reactive Forms - 单选按钮组 [英] Angular 5 Reactive Forms - Radio Button Group

问题描述

我有 2 个单选按钮，我使用的是响应式表单，并且在我的组件中添加了表单控件.我面临的问题是 name 属性必须与 formControlName 相同.当我将 name 属性设置为相同时，我只能选择 1 个单选按钮——永远不能取消选择并选择另一个.只允许我选择相同的.

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

然后添加到我的表单组

genderControl: this.genderControl,

我的 HTML:

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

表单组

 this.personalInfo = new FormGroup({searchControl: this.searchControl,标题控件:this.titleControl，firstNameControl: this.firstNameControl,middleNameControl: this.middleNameControl,lastNameControl: this.lastNameControl,生日控制:this.birthdayControl，性别控制:this.genderControl，电话控制:this.phoneControl，taxCanadaControl: this.taxCanadaControl,省控制:this.provinceControl，countryControl: this.countryControl,taxCountryControl: this.taxCountryControl,信用控制:this.creditControl});

解决方案

我试过你的代码，你没有为你的 formControlName 分配/绑定值.

在 HTML 文件中:

<标签><输入类型=收音机"值=男性"formControlName=性别"><span>男性</span><标签><输入类型=收音机"值=女性"formControlName=性别"><span>女性</span></表单>

在 TS 文件中:

 表单:FormGroup；构造函数(FB:FormBuilder){this.name = 'Angular2'this.form = fb.group({性别:['', Validators.required]});}

确保正确使用响应式表单:[formGroup]=form" 并且您不需要 name 属性.

在我的示例中.span 标签中的单词 male 和 female 是沿单选按钮显示的值，Male 和 Female 值是绑定的formControlName

看截图:

让它更短:

<输入类型=收音机"value='男性' formControlName="性别";>男<输入类型=收音机"value='Female' formControlName="gender">Female</表单>

希望有帮助:)

I have 2 radio buttons, I'm using reactive forms and I have added the form controls within my component. The issue I am facing is that the name attribute has to be the same as the formControlName. When I set the name attribute as the same, I can only select 1 radio button -- can never unselect and select the other one. Only allows me to select the same one.

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

and then added to my Form Group

genderControl: this.genderControl,

My 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>

Form Group

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

解决方案

I tried your code, you didn't assign/bind a value to your formControlName.

In HTML file:

<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>

In the TS file:

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

Make sure you use Reactive form properly: [formGroup]="form" and you don't need the name attribute.

In my sample. words male and female in span tags are the values display along the radio button and Male and Female values are bind to formControlName

See the screenshot:

To make it shorter:

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

Hope it helps:)

这篇关于Angular 5 Reactive Forms - 单选按钮组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！