reactivos - tablas angular 4

Formas reactivas-atributo deshabilitado

Question

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á utilizando el atributo deshabilitado con una directiva de forma reactiva. Si establece deshabilitado en verdadero cuando configura este control en su clase de componente, el atributo deshabilitado se establecerá en el DOM para usted. Recomendamos utilizar este enfoque para evitar errores de ''cambio después de verificado''.

  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 FormControl 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 la input ). ¿Cuál es el problema?

Answer 1

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}),
});

... tuvo 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

Answer 2

He estado usando [attr.disabled] porque todavía me gusta esta plantilla impulsada por enable programático () / disable () ya que es IMO superior.

Cambio

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

a

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

Si está en un material más nuevo, cambie md-input a mat-input .

Answer 3

Inicialización (componente) usando:

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

Luego, 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();

Answer 4

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

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

Answer 5

La mejor manera 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.
  })
}

Answer 6

Para resolver este problema, puede intentarlo así.

para deshabilitar

this.myForm.controls[''id''].disable();

para habilitar

this.myForm.controls[''id''].enable();

Para obtener más información, consulte el problema publicado en github relacionado con este https://github.com/angular/angular/issues/11271#issuecomment-244507976

Answer 7

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

Answer 8

Utilice [attr.disabled] en su lugar [deshabilitado], en mi caso funciona bien

Answer 9

agregar deshabilitar = "verdadero" al campo html Ejemplo: deshabilitar

<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>

Answer 10

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