Formas reactivas - atributo deshabilitado

Estoy tratando de usar el disabledatributo de a 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á utilizando el atributo disabled con una directiva de formulario reactivo. Si establece disabled en true cuando configura este control en su clase de componente, el atributo disabled se establecerá en el DOM para usted. Recomendamos utilizar este enfoque para evitar errores de "cambio después de comprobar".

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

Así que lo puse en FormControl, y lo borré 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 input). ¿Cuál es el problema?

Lo he estado usando [attr.disabled]porque todavía me gusta esta plantilla impulsada que la habilitación () / deshabilitación () programática ya que es superior en mi opinión.

Cambio

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

a

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

Si tiene un material más nuevo, cambie md-inputa mat-input.

Puede habilitar / deshabilitar un control de formulario utilizando los siguientes métodos:

control.disable () o control.enable ()

Si eso no funcionó, puede 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/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Espero eso ayude

Descubrí que necesitaba tener un valor predeterminado, incluso si era una cadena vacía para que funcionara. Así que esto:

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

... tenía que convertirse en esto:

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

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

En mi caso con Angular 8 . Quería activar / desactivar la entrada según la condición.

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

Eliminé [attr.disabled]de 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();
}

Inicialización (componente) usando:

public selector = new FormControl({value: '', disabled: true});

Entonces, en lugar de usar (plantilla):

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Simplemente elimine el atributo deshabilitado:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Y cuando tenga elementos para mostrar, inicie (en el componente): this.selector.enable();

Solo para quienes están usando formularios reactivos: para elementos HTML nativos [attr.disabled] funcionará, pero para elementos materiales necesitamos deshabilitar dinámicamente el elemento.

this.form.get('controlname').disable();

De lo contrario, se mostrará en el mensaje de advertencia de la consola.

Probé estos en angular 7. Funcionó con éxito.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

this.form.disable()
this.form.enable()

Por un formulario, el control hace deshabilitar

this.form.get('first').disable()
this.form.get('first').enable()

O método de configuración inicial.

first: new FormControl({disabled: true}, Validators.required)

Use [attr.disabled] en lugar de [disabled], en mi caso funciona bien

agregar disable = "true" al campo html Ejemplo: desactivar

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

La belleza de las formas reactivas es que puede detectar cambios de valores de cualquier elemento de entrada muy fácilmente y al mismo tiempo puede cambiar sus valores / estado. Así que esta es otra forma de abordar su problema usando enable disable.

Aquí está la solución completa en stackblitz .

La desactivación de los campos de formulario de mat está exenta si está utilizando la validación de formulario, así que asegúrese de que su campo de formulario no tenga validaciones como (validators.required), esto funcionó para mí. por ejemplo:

editUserPhone: new FormControl ({valor: '', deshabilitado: verdadero})

esto hace que los números de teléfono del usuario no sean editables.

Esta fue mi solución:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

en Angular-9 si desea deshabilitar / habilitar en el botón, haga clic aquí es una solución simple si está utilizando formas reactivas.

definir una función en el archivo component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Llámelo desde su component.html

p.ej

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Cuando cree un nuevo control de formulario, use el siguiente:

variable: FormControl = new FormControl({value: '', disabled: true});

Si desea cambiar la actividad, use el siguiente:

this.variable.enable() 

o

this.variable.disable()

agregue el atributo de nombre a su md-input. si no resuelve el problema, publique su plantilla

La mejor forma de hacer esto.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}