大佬教程收集整理的这篇文章主要介绍了Angular 5 Reactive Forms – 单选按钮组,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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,middl@R_607_8371@Control: this.middl@R_607_8371@Control,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 });
在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 – 单选按钮组全部内容,希望文章能够帮你解决Angular 5 Reactive Forms – 单选按钮组所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。