Angular 5 个响应式表单 - 单选按钮组

Question

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

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

Answer 1

我试过你的代码，你没有 assign/bind 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 是沿单选按钮显示的值，而 Male 和 Female 值绑定到 formControlName

见截图：

为了缩短它：

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

希望对您有所帮助:)

Answer 2

如果你想导出usg Boolean true False需要在值周围添加“[]”

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

Angular 5 个响应式表单 - 单选按钮组

Angular 5 Reactive Forms - Radio Button Group

angular

angular-reactive-forms

angular5