Angular2如何知道输入是否是具有反应形式的无线电类型

Question

我正在 angular 中构建响应式表单。我有一个带有性别名称的简单单选按钮：

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"的属性值？我想知道输入控件是不是收音机类型

Answer 1

您可以在您的组件中使用此代码访问该值

let genderValue = this._form.value.gender;

Answer 2

编辑：这不能用反应形式解决，但你可以用动态形式解决：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);
}

Answer 3

一个简单的，也提供了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

Angular2如何知道输入是否是具有反应形式的无线电类型

Angular2 how to know if an input is of type radio with reactive forms

angular

angular-reactive-forms