web-dev-qa-db-ja.com

Angular2リアクティブフォームで入力タイプの値を取得する方法

私は角度でリアクティブフォームを構築しています。性別名のシンプルなラジオボタンがあります。

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"？の属性値にどのようにアクセスしますか？入力制御が無線タイプかどうかを知りたい。

angularangular-reactive-forms
7
sensei

そのためにはJavaScriptネイティブを使用する必要があると思うので、汎用の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);
}
2
Mehdi Benmoha

コンポーネントでこのコードを使用して値にアクセスできます

let genderValue = this._form.value.gender;
9
Argus Malware

単純なもの、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
2
WasiF

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;
}
0
Dmitry Grinko