Question

我正在构建有角度的反应形式。我有一个带有性别名称的简单单选按钮：

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 =＆＃34; radio＆＃34; 的属性值？我想知道输入控件是否是无线电类型。

Answer 1

您可以在组件

中使用此代码来访问该值

let genderValue = this._form.value.gender;

Answer 2

我认为你应该使用JavaScript native，所以在你的通用GetControl函数中写下这个：

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

首先，将formControlName声明为getter

// HTML
<input type="text" formControlName="name">

// Typescript
get name(): AbstractControl { // name property
   return this.form.get('name')
}

现在您将能够访问此控件具有的所有属性

console.log(name.value) // you'll get the name value

Answer 4

使用 ngClass 指令：

html

<select [ngClass]="{'placeholder-gray': !myForm.value.mySelect}" 
    formControlName="mySelect" class="form-control">

    <option value="null" disabled hidden>see dropdown list</option>
    ...

</select>

css

.placeholder-gray{
  color: gray;
}

Angular2如何获取反应形式的输入类型值

4 个答案: