Formulaires réactifs - attribut désactivé

Question

J'essaie d'utiliser le disabled de l'attribut formControl . Lorsque je le mets dans le modèle, il fonctionne :

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

Mais le navigateur me prévient :

Il semble que vous utilisiez l'attribut disabled avec une directive de formulaire réactive. Si vous mettez disabled à true lorsque vous configurez ce contrôle dans votre classe de composant, l'attribut disabled sera réellement défini dans le DOM pour vous. pour vous. Nous vous recommandons d'utiliser cette approche pour éviter les erreurs "changed after checked".

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

Donc je l'ai mis dans le FormControl et supprimé du modèle :

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

Mais cela ne fonctionne pas (il ne s'agit pas de désactiver la fonction input ). Quel est le problème ?

Answer 1

J'ai utilisé [attr.disabled] parce que je continue à préférer ce modèle à l'activation/désactivation programmatique, car il est supérieur, selon moi.

Changement

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

à

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

Si vous êtes sur un changement de matériel plus récent md-input a mat-input .

Answer 2

Pour résoudre ce problème, vous pouvez essayer comme suit .

pour la désactivation

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

pour permettre

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

Pour plus de références, consultez le problème posté sur github à ce sujet. https://github.com/angular/angular/issues/11271#issuecomment-244507976

Answer 3

Vous pouvez activer/désactiver un contrôle de formulaire en utilisant les méthodes suivantes :

control.disable() ou control.enable()

Si cela n'a pas fonctionné pour vous, vous pouvez utiliser une directive

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 ) {
  }

}

Vous pourriez alors l'utiliser comme suit

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

Cette technique est décrite ici :

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

J'espère que cela vous aidera

Answer 4

J'ai constaté que je devais avoir une valeur par défaut, même s'il s'agissait d'une chaîne vide. Donc, ceci :

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

...devait devenir ça :

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

Voir ma question (qui, à mon avis, n'est pas un doublon) : Passer 'disabled' dans l'objet form state au constructeur de FormControl ne fonctionne pas

Answer 5

Utilisez [attr.disabled] au lieu de [disabled], dans mon cas, cela fonctionne bien.