web-dev-qa-db-de.com

Angular form updateValueAndValidity aller untergeordneten Steuerelemente

In meiner Angular 4 App habe ich ein Formular mit mehreren Steuerelementen.

An einigen Stellen muss ich die Aktualisierung ihrer Gültigkeit erzwingen, also mache ich Folgendes:

this.form.get('control1').updateValueAndValidity();
this.form.get('control2').updateValueAndValidity();
this.form.get('control3').updateValueAndValidity();
// and so on....

und dann:

this.form.updateValueAndValidity();

das funktioniert gut.

Allerdings habe ich mich gefragt, ob es eine bessere Möglichkeit gibt, dasselbe zu erreichen, indem ich nur eine Methode im übergeordneten Formular aufrufe.

Entsprechend der Dokumentation Methode updateValueAndValidity():

Standardmäßig werden auch der Wert und die Gültigkeit der Vorfahren aktualisiert .

aber in meinem Fall muss ich den Wert und die Gültigkeit seiner Nachkommen aktualisieren. So kann ich viele Codezeilen loswerden.

13
Francesco Borzi

Derzeit ist es nicht möglich, die Nachkommen eines AbstractControls (FormGroup, ...) mit dem AbstractControl selbst zu aktualisieren. Vielleicht wird es in einer zukünftigen Version möglich sein.

https://github.com/angular/angular/issues/617

https://github.com/angular/angular/issues/22166

update: Eine Pull-Anfrage ist bereits offen https://github.com/angular/angular/pull/19829

8
Gerros

Ich habe mein ähnliches Problem gelöst, indem ich die Kontrollen wiederholt und das Update manuell ausgelöst habe. Wahrscheinlich ist dies keine optimale Lösung:

private triggerValidation(control: AbstractControl) {
    if (control instanceof FormGroup) {
        const group = (control as FormGroup);

        for (const field in group.controls) {
            const c = group.controls[field];

            this.triggerValidation(c);
        }
    }
    else if (control instanceof FormArray) {
        const group = (control as FormArray);

        for (const field in group.controls) {
            const c = group.controls[field];

            this.triggerValidation(c);
        }
    }

    control.updateValueAndValidity({ onlySelf: false });
}
2
Pier
validateFormFields(fields) {
    try {
      Object.entries(fields.controls).forEach((control: any) => {
        if (typeof control[0] == 'Array' 
        ) {
          this.validateFormFields(control[1]);
        } else {
          if (control[1].controls) {
            Object.entries(control[1].controls).forEach((c: any) => {
              c[1].touched = true;
            });
          } else {
            control[1].touched = true;
          }

        }
      });
    } catch (e) {
      console.log(e);
    }
  }
0