Desactivar un botón de opción del grupo.
Tengo una plantilla de formulario reactivo en HTML de mi clase:
<form [formgroup]="formGroup">
<md-radio>
[value]="one"
[formControlName]="radioButton"
</md-radio>
<md-radio>
[value]="two"
[formControlName]="radioButton"
[disabled]="disabled_flag"
</md-radio>
</form>
Y en el código, he creado el grupo de formulario:
this.formGroup = this.fb.group({
radioButton: [
{ value: "two", disabled: false },
[],
[],
{ updateOn: blur },
],
});
Si cambio disabled_flag en el código a true, el botón de radio “two” estará desactivado, pero obtengo este mensaje en el navegador:
Parece que estás utilizando el atributo
disabledcon una directiva de formulario reactivo. Si establecesdisabledentrue
cuando configuras este control en tu clase de componente, el atributodisableden realidad se establecerá en el DOM por ti.
Recomendamos usar este enfoque para evitar errores de “cambiado después de comprobado”.Ejemplo:
form = new FormGroup({
first: new FormControl({value: ‘Nancy’, disabled: true}, Validators.required),
last: new FormControl(‘Drew’, Validators.required)
});
Entonces necesito cambiar dinámicamente esta bandera y cómo hacerlo correctamente y evitar este mensaje de advertencia, o cómo desactivar el botón de radio correctamente?
davy.ai
Para deshabilitar correctamente un botón de opción, puedes establecer el valor “disabled” directamente en el control del formulario al crear el grupo de formularios, de la siguiente manera:
Luego, en tu plantilla HTML, simplemente puedes enlazar el atributo “disabled” a la propiedad “disabled” del control del formulario:
De esta manera, el estado de deshabilitado del botón de opción será controlado por el control del formulario y no recibirás el mensaje de advertencia sobre el uso del atributo “disabled” con una directiva de formulario reactivo. Y si necesitas cambiar dinámicamente el estado deshabilitado, simplemente puedes actualizar la propiedad “disabled” del control del formulario: