reactivos - Formas reactivas Angular2 control de forma para botones de radio

formularios reactivos angular 6

Question

Estoy construyendo una forma en Angular2 con formas reactivas. Estoy usando FormBuilder para hacer un grupo de campos. Para cuadros de texto esto funciona extremadamente bien. Pero no puedo encontrar un control de forma para los botones de radio.

¿Como funciona esto? ¿Debo hacer <input formControlName="gender" type="radio"> tal como lo hago con la entrada de texto?

Answer 1

¿Debo hacer <input formControlName="gender" type="radio"> tal como lo hago con la entrada de texto?

Sí.

¿Como funciona esto?

Las directivas de control de formulario utilizan una directiva ControlValueAccessor para comunicarse con el elemento nativo. Hay diferentes tipos de ControlValueAccessors para cada una de las entradas posibles. El correcto es elegido por el selector de la directiva de acceso al valor. Los selectores se basan en el type <input> . Cuando tenga type="radio" , se usará el valor de acceso para radios.

Answer 2

En su componente, defina su botón de radio como parte de su formulario:

export class MyComponent {
form: FormGroup;
constructor(fb: FormBuilder){
this.form = fb.group({
gender: ""
});
}
}

En su componente HTML, construya su formulario:

<div class="form-group">
<label>Please select your gender</label>
<div class="row">
<label class="md-check">
<input type="radio" value="female" name="gender" formControlName="gender">
Female
</label>
<label class="md-check">
<input type="radio" value="male" name="gender" formControlName="gender">
Male
</label>
</div>
</div>

Supongo que sabe cómo construir el formulario completo con su botón de envío, que no se muestra aquí.

Cuando se envía el formulario, puede obtener el valor del botón de opción aquí:

let genderValue = this.form.value.gender;

Esto será "femenino" o "masculino" dependiendo de qué botón de opción esté marcado.

Espero que esto te ayude. ¡Buena suerte!

Answer 3

Una pequeña para agregar sobre las formas reactivas que noté. Si el valor es un número entero, debe cambiarse a cadena o, de lo contrario, no se seleccionará el botón de opción.

 this.jobForm = this._fb.group({
id: [res["job"]["id"]],
job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required],
title: [res["job"]["title"],Validators.required]
});

Answer 4

Los controles de material angular son (en su mayoría) lo suficientemente maduros como para usarlos ahora.

La mayoría de sus muestras usan ngModel, pero aquí es cómo puede hacerlo con formControlName.

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem">
<mat-radio-button [value]="''Blue''">Blue things</mat-radio-button>
<mat-radio-button [value]="''Red''">Red things</mat-radio-button>
<mat-radio-button [value]="''Orange''">Orange things</mat-radio-button>
</mat-radio-group>

Estoy usando angular/flex-layout para colocar mis botones en una columna vertical.

(También podría haber hecho value=''Blue'' para una constante o [value]="blueColorName" para referirse a una propiedad del modelo.

Creo que puede haber un problema con 0 porque no es un valor "verdadero", así que tenga cuidado si está vinculado a enums (puede que ya no sea un problema).