Angular2 Reaktive Formen - Deaktivieren Sie die Formular-Steuerelement dynamisch vom Zustand

Ich habe eine select-Steuerelement, das möchte ich deaktivieren, dynamisch, abhängig von einer Bedingung:

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

Jedoch docType nicht aktiviert werden, obwohl irgendwann.activeCategory wird 'Dokument'.

Wie kann ich dieses Problem beheben?

InformationsquelleAutor franco | 2017-05-15
  1. 29

    Da ich nicht weiß, wie man manipulieren activeCategory (vielleicht ist es auch ein FormControl?), Ich werde vorschlagen, den folgenden Ansatz:

    Können Sie (change) zu erkennen, wenn this.activeCategory hat sich geändert, wie folgt:

    1 - Wenn Sie ngModel:

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

    2 - Wenn es ein FormControl:

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

    So, in der Komponente, die Sie Bearbeiten können die docType Kontrolle Verwendung disable/enable Methoden:

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

  if (event.value === 'document') {
    ctrl.enable();
  } else {
    ctrl.disable();
  }
}
    • Option 2: wenn es ein Control empfehle ich die Anmeldung zu `` dies.form.get('activeCategory').valueChanges `` anstatt Logik auf DOM.
    InformationsquelleAutor developer033
  2. 7

    Sie haben, um Elemente auszuwählen, die anders, als Sie auch andere HTML-Elemente. Haben Sie eine Rücksetzung durchführen, wenn this.activeCategory änderungen.

    Etwas wie dieses:

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

    Natürlich, werden Sie wahrscheinlich wollen, um den aktuellen Wert, anstatt eine hartcodierte '2'.

    Gleiche Art von Sache, um es zu deaktivieren, wenn das notwendig erscheint (und es wohl auch wird).

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

    Mehr Informationen über ng form-control zurücksetzen.

    • Gibt es eine schönere Art, dies zu tun? Mit sagen setValue oder patchValue?
    • Für das aktivieren/deaktivieren wählen Sie eine, nicht, dass ich mir bewusst bin. setValue und patchValue sind für die änderung der Formular-Steuerelemente-Wert, nicht visuellen Zustand.
    InformationsquelleAutor R. Richards
Schreibe einen Kommentar