web-dev-qa-db-fra.com

Angular2 Reactive Forms - Désactive le contrôle de formulaire de manière dynamique à partir de la condition.

J'ai un contrôle de sélection que je veux désactiver dynamiquement en fonction d'une condition:

this.activityForm = this.formBuilder.group({
  docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required]
});

Cependant, docType n'est pas activé, même si, à un moment donné, this.activeCategory devient "document".

Comment puis-je réparer ça?

angularangular2-forms
14
franco

Puisque je ne sais pas comment vous manipulez activeCategory (c'est peut-être aussi un FormControl?), Je suggérerais l'approche suivante:

Vous pouvez utiliser (change) pour détecter quand this.activeCategory a changé, comme ci-dessous:

1 - Si vous utilisez ngModel:

<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)">

2 - Si c'est un FormControl:

<input type="text" formControlName="activeCategory" (change)="checkValue($event)">

Ainsi, en composant, vous pouvez manipuler le docTypecontrôle en utilisant disable/enable méthodes:

checkValue(event: Event) {
  const ctrl = this.activityForm.get('docType');

  if (event.value === 'document') {
    ctrl.enable();
  } else {
    ctrl.disable();
  }
}
32
developer033

Vous devez gérer les éléments sélectionnés différemment des autres éléments HTML. Vous devrez effectuer une réinitialisation lorsque this.activeCategory Sera modifié.

Quelque chose comme ça:

this.activityForm.controls['docType'].reset({ value: '2', disabled: false });

Bien sûr, vous voudrez probablement utiliser la valeur actuelle plutôt qu'un code codé en dur '2'.

Même chose pour le désactiver, si besoin est (et ce sera probablement le cas).

this.activityForm.controls['docType'].reset({ value: '2', disabled: true });

Plus d'informations sur ng form control reset .

7
R. Richards

this.activityForm.controls ['docType']. disable ();

0
Alandroid