Désactiver les champs de saisie Angular 5 de la bonne manière

Question

J'ai un FormGroup qui a été créé de cette manière :

form: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

this.form = this._formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required, Validators.email]
});

Lorsqu'un événement se produit, je veux désactiver ces entrées, donc, dans le HTML j'ai ajouté :

Où isDisabled est une variable que je bascule à true lorsque l'événement en question se produit.

Comme vous pouvez l'imaginer, je reçois le message :

Il semble que vous utilisiez l'attribut disabled avec une directive de formulaire réactif. Si vous définissez 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. Nous recommandons d'utiliser cette approche pour éviter les erreurs de type 'changed after checked'.

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

Donc, avec l'exemple que ce avertissement montre et avec un peu de recherche, j'ai trouvé que je devrais déclarer mes contrôles comme suit :

name: [{ value: '', disabled: this.isDisabled }, Validators.required]

Le problème est : Cela ne bascule pas entre activé/désactivé lorsque la variable change entre true/false

Quelle est la bonne manière d'avoir une variable contrôlant si une entrée est activée ou désactivée ?

Je ne veux pas le faire manuellement (ex : this.form.controls['name'].disable()) car cela ne semble pas être une manière très réactive, je devrais l'appeler à l'intérieur d'une bonne quantité de méthodes. Probablement pas une bonne pratique.

Merci

Answer 1

Vous pouvez modifier l'assignation de la variable à une méthode setter de sorte que vous auriez :

set isDisabled(value: boolean) {
 this._isDisabled = value;
 if(value) {
  this.form.controls['name'].disable();
 } else {
    this.form.controls['name'].enable();
  }
}

Answer 2

Une solution consiste à créer une directive et à utiliser la liaison pour cela comme décrit ici

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

}

puis

Answer 3

La bonne méthode pour désactiver un contrôle de formulaire. Avec les formulaires réactifs, vous ne devriez jamais désactiver une entrée depuis le template. Donc, dans n'importe quelle méthode de votre composant que vous appelez, vous devriez désactiver l'entrée comme ceci :

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

Answer 4

---

Désactiver TextBox en Angular 7

Answer 5

Dans Reactive Form, vous pouvez désactiver tous les champs de formulaire en utilisant this.form.disable(). Dans Template Driven Form, vous pouvez désactiver tous les champs de formulaire en utilisant this.myform.form.disable() où myForm est @ViewChild('form') myForm ;