我有 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
});
1 回答
我尝试了你的代码,你的 formControlName 没有 assign/bind 值。
在 HTML 文件中:
在 TS 文件中:
确保正确使用 Reactive 表单:
[formGroup]="form"
并且您不需要 name 属性。在我的样本中。 span 标签中的单词
male
和female
是沿单选按钮显示的值,Male
和Female
值绑定到formControlName
看截图:
为了缩短它:
希望它 helps:)