it-swarm.com.de

angular 5 Vorlagenformulare erkennen Änderung des Gültigkeitsstatus des Formulars

sind reaktive Formulare der richtige Weg, um eine Komponente zu haben, die auf Änderungen im Gültigkeitsstatus des darin enthaltenen Formulars wartet und die Methoden einiger Compoments ausführt?

Es ist einfach, die Senden-Schaltfläche in der Vorlage zu deaktivieren, indem Sie templateRef wie [disabled]="#myForm.invalid" Verwenden, dies betrifft jedoch nicht die Logik der Komponente.

Betrachtet man Vorlagenformulare 'doc Ich habe keinen Weg gefunden

19
Cec

Wenn Sie nur das status und nicht das value erhalten möchten, können Sie statusChanges verwenden:

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

Wenn Sie sogar Datenänderungen wünschen, können Sie den valueChanges des form abonnieren und den Status des Formulars mit this.myForm.status Überprüfen:

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

Mögliche Statuswerte sind: [~ # ~] gültig [~ # ~] , [~ # ~] ungültig [~ # ~] , [~ # ~] ausstehend [~ # ~] oder DEAKTIVIERT

Hier ist die Referenz für das gleiche

32
Sravan

Sie können so etwas tun, um eine Gültigkeitsänderung zu erkennen und eine Methode basierend darauf auszuführen, ob das Formular VALID oder INVALID ist.

this.myForm.statusChanges
  .subscribe(val => this.onFormValidation(val));

onFormValidation(validity: string) {
  switch (validity) {
    case "VALID":
      // do 'form valid' action
      break;
    case "INVALID":
      // do 'form invalid' action
      break;
  }
}
3
Chris Halcrow

Sie können die gesamten Formularänderungen abonnieren und Ihre Logik dort implementieren.

@ViewChild('myForm') myForm;

this.myForm.valueChanges.subscribe(data => console.log('Form changes', data));
1
ritaj