web-dev-qa-db-fra.com

Désactiver Angular 5 champs de saisie de manière correcte

J'ai un groupe de formes qui a été créé comme ça:

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 souhaite désactiver ces entrées. Dans le code HTML, j'ai ajouté:

<input class="form-control" placeholder="Name" name="name" formControlName="name" [(ngModel)]="name" autocomplete="off" [disabled]="isDisabled" required>

<input class="form-control" placeholder="Email" name="email" formControlName="email" [(ngModel)]="email" email="true" autocomplete="off" [disabled]="isDisabled" required>

Où isDisabled est une variable que je bascule en true lorsque cet événement se produit.

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

Il semble que vous utilisiez l'attribut disabled avec un formulaire réactif directif. Si vous définissez disabled sur true Lorsque vous configurez ce contrôle dans votre classe de composants, l'attribut désactivé sera en réalité défini dans le DOM pour vous. Nous vous recommandons d'utiliser cette approche pour éviter les erreurs «changé après contrôle».

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

Donc, avec l'exemple que cet avertissement montre et avec une petite recherche, j'ai trouvé que je devais déclarer mes contrôles comme:

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

Le problème est le suivant: Il n’est pas possible de basculer entre désactivé/activé lorsque la variable change entre true/false

Comment 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()) parce que cela ne semble pas très réactif, il faudrait que je l'appelle avec un bon nombre de méthodes. Probablement pas une bonne pratique.

THX

javascripthtmlangularangular-forms
4
João Ghignatti

Vous pouvez changer l'affectation de la variable en une méthode de définition afin que vous ayez:

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

Une solution consiste à créer une directive et à utiliser des liaisons pour cela, comme décrit dans 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

<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>
2
RezaRahmati

La bonne façon de désactiver un contrôle de formulaire. Avec les formulaires réactifs, vous ne devez jamais désactiver une entrée du modèle. Donc, quelle que soit la méthode de votre composant que vous appelez, vous devez désactiver l'entrée de la manière suivante:

this.form.get('name').disable();
0
Sandra Willford