更新时间:2023-12-03 07:52:52
我试过你的代码,你没有为你的 formControlName 分配/绑定值.
在 HTML 文件中:
在 TS 文件中:
表单:FormGroup;构造函数(FB:FormBuilder){this.name = 'Angular2'this.form = fb.group({性别:['', Validators.required]});}
确保正确使用响应式表单:[formGroup]=form"
并且您不需要 name 属性.
在我的示例中.span 标签中的单词 male
和 female
是沿单选按钮显示的值,Male
和 Female
值是绑定的到 formControlName
看截图:
让它更短:
希望有帮助:)
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:)