forms - navigationend - Angular 2: Deshabilitar el cambio de entrada no funciona

router events subscribe angular 4

Question

Hasta "final" 2.0 de Angular he hecho esto:

<input type="text" formControlName="name" [disabled]="!showName">

Para activar / desactivar dinámicamente las entradas de formulario.

Después de actualizar de Rc7 a 2.0, recibo esta advertencia en la ventana de la consola:

Parece que estás usando el atributo deshabilitado con una directiva de formulario reactivo. Si establece deshabilitado en verdadero cuando configura este control en su clase de componente, el atributo deshabilitado realmente se configurará en el DOM para usted. Recomendamos utilizar este enfoque para evitar errores "modificados después de verificados".

He cambiado mi código para seguir estas instrucciones como esta:

this._userGroupUsersForm = this._formBuilder.group({
''users'': [{'''', disabled: this.showName}, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50), Validators.pattern("^[a-zA-ZåäöÅÄÖ 0-9_-]+$")])]
});

Y eso funciona bien para la carga de la página inicial, pero ya no puedo cambiar el estado de esta manera:

toggleName() : void { this.showName = !this.showName; }

¿Cómo puedo solucionar esto?

Nota: Mi forma "anterior" de hacer esto (configurando [deshabilitado]) tampoco funciona.

Answer 1

A partir de RC6, debe llamar a la función deshabilitar () Formularios RC6: el atributo deshabilitado ya no se puede establecer de forma dinámica .

Answer 2

Debes estar utilizando:

[attr.disabled]

En lugar de:

[disabled]

Espero que funcione.

Answer 3

Este mismo problema me tenía tirando de mi pelo. Mi solución fue utilizar la interpolación en lugar de un enlace unidireccional para actualizar la propiedad. En su caso, en lugar de utilizar:

<input type="text" formControlName="name" [disabled]="!showName">

Podrías hacerlo:

<input type="text" formControlName="name" disabled="{{!showName}}">

Tan pronto como lo hice, pude activar / desactivar dinámicamente elementos en mis formularios.

¡Espero que esto ayude!

Answer 4

Esto debería funcionar

toggleName() : void {
let ctrl = this.form.get(''name'')
ctrl.enabled ? ctrl.disable() : ctrl.enable()
}

Answer 5

Puedes intentar usar el atributo de solo lectura en tu entrada.

deshabilitado >>> solo lectura

<input type="text" formControlName="name" [readonly]="!showName">

Answer 6

Si alguien se desplaza a través de esto y la respuesta aceptada (Günters) no funciona, como no lo hizo para mí al principio. Puede ser que esté intentando usarlo con un componente personalizado y no haya implementado el método opcional setDisabledState(isDisabled: boolean) desde la interfaz ControlValueAccessor .