![](/img/trans.png)
[英]Angular2/4 - Reactive forms and radio buttons: How to check one by default
[英]Angular2 how to know if an input is of type radio with reactive forms
我正在以角度构建反应形式。 我有一个带有性别名称的简单单选按钮:
this._form = this._formBuilder.group({
gender: ['', Validators.required]
});
模板:
<div class="form-group">
<h4>What is your gender?</h4>
<div class="form-group">
<label class="custom-control custom-radio">
<input value="male" name="gender" type="radio" class="custom-control-input" formControlName="gender">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input value="female" name="gender" type="radio" class="custom-control-input" formControlName="gender">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
<app-field-error-display [displayError]="formValidationService.IsFieldInvalid(_form,'gender','required')" errorMsg="Field is required"></app-field-error-display>
</div>
</div>
我可以像这样按名称访问控制字段:
public GetControl(form: FormGroup, field: string){
return form.get(field);
}
基于此,我如何访问type="radio"的属性值? 我想知道输入控件是否属于收音机类型。
您可以通过在组件中使用此代码来访问该值
let genderValue = this._form.value.gender;
一个简单的,也提供intellisense
打字稿
// declare a form with properties i.e. name
this.form = this.formBuilder.group({
name: ['', Validators.required]
});
// create getter for form-property i.e.
get Name(): AbstractControl {
return this.form.get('name')
}
HTML
<input type="text" [formControl]="Name">
{{Name.value}} // your can see your input name here
编辑:这不能用反应形式解决,但你可以用动态形式: https : //angular.io/guide/dynamic-form
以下是一个肮脏的解决方法(不推荐):
在 Angular 中使用原生 JS 并不是一个好的实践,因为你失去了很多 Angular 特性,但如果你只是在这里寻找一个快速而肮脏的修复方法,那就是:
public GetControl(form: FormGroup, field: string){
let el = document.querySelector('input[name="'+field+'"]');
if(el.getAttribute('type') == 'radio'){
// This is a radio input
}
return form.get(field);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.