Búsqueda de sitios web

angular - Formularios reactivos - atributo deshabilitado

Estoy tratando de usar el atributo disabled de un formControl. Cuando lo pongo en la plantilla, funciona:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

Pero el navegador me alerta:

Parece que estás usando el atributo disabled con una directiva de formulario reactivo. Si configuras disabled a true cuando configures este control en la clase de tu componente, el atributo disabled se establecerá realmente en el DOM por ti. Recomendamos usar este enfoque para evitar errores de 'cambiado después de la verificación'.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Así que lo puse en el FormControl, y lo eliminé de la plantilla:

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

Pero no funciona (no está deshabilitando el input). ¿Cuál es el problema?

Respuesta #1

He estado usando [attr.disabled] porque todavía me gusta más este enfoque basado en plantillas que usar enable()/disable() programáticamente, ya que es superior en mi opinión.

Cambiar

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

a

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Si estás en material más reciente, cambia md-input a mat-input.

Respuesta #2

En mi caso con Angular 8. Quería alternar la activación/desactivación del campo de entrada dependiendo de la condición.

[attr.disabled] no funcionó para mí, así que aquí está mi solución.

Eliminé [attr.disabled] del HTML y en la función del componente realicé esta verificación:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Respuesta #3

Puedes activar/desactivar un control de formulario utilizando los siguientes métodos:

control.desactivar() o control.activar()

Si eso no funcionó para ti, puedes usar una directiva

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

Entonces podrías usarlo así

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Esta técnica se describe aquí:

https://netbasal.com/deshabilitar-controles-de-formulario-cuando-se-trabaja-con-formularios-reactivos-en-angular-549dd7b42110

Espero que ayude

Respuesta #4

Necesita un valor predeterminado, incluso si es una cadena vacía. Entonces esto:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

...debería ser esto:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

El razonamiento detrás de este requisito se puede encontrar aquí: github.com/angular/angular/pull/10994#issuecomment-244195999

Vea mi pregunta (que no creo que sea un duplicado): Pasar 'disabled' en el objeto de estado del formulario al constructor de FormControl no funciona

Artículos relacionados