web-dev-qa-db-fra.com

Angular2 comment obtenir une valeur de type d'entrée dans des formes réactives

Je construis des formes réactives sous forme angulaire. J'ai un bouton radio simple avec le nom de genre:

this._form = this._formBuilder.group({
            gender: ['', Validators.required]
        });

Modèle:

            <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>

Je peux accéder au champ de contrôle par son nom comme ceci:

public GetControl(form: FormGroup, field: string){
        return form.get(field);
    }

Sur cette base, comment accéder à la valeur d'attribut de type = "radio" ? Je veux savoir si le contrôle d’entrée est de type radio.

angularangular-reactive-forms
5
sensei

Je pense que vous devriez utiliser JavaScript natif pour cela, alors écrivez ceci dans votre fonction générique 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);
}
3
Mehdi Benmoha

vous pouvez accéder à la valeur en utilisant ce code dans votre composant 

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

Un simple, fournit intellisense aussi

d'abord, déclarer un contrôle de formulaire en tant que propriété

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

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

et alors

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

Utilisez ngClass directive:

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