So lösen Sie Formularvalidatoren in Angular2 aus

In angle2 möchte ich Validatoren für einige Steuerelemente auslösen, wenn ein anderes Steuerelement geändert wird. Gibt es eine Möglichkeit, das Formular einfach anzuweisen, erneut zu validieren? Besser noch, kann ich die Validierung bestimmter Felder anfordern?

Beispiel: Geben Sie Checkbox X und Eingabe P ein. Eingabe P hat einen Validator, der sich basierend auf dem Modellwert von X unterschiedlich verhält. Wenn X aktiviert / deaktiviert ist, muss ich den Validator für P aufrufen. Der Validator für P betrachtet das Modell für Bestimmen Sie den Zustand von X und validieren Sie P entsprechend.

Hier ist ein Code:

constructor(builder: FormBuilder) {
    this.formData = { num: '', checkbox: false };

    this.formGp = builder.group({
        numberFld: [this.formData.num, myValidators.numericRange],
        checkboxFld: [this.formData.checkbox],
    });
}

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
        // I want to be able to do something like the following line:
        this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']);
    }
});

Hat jemand eine Lösung? Vielen Dank!

Ich weiß nicht, ob Sie noch nach einer Antwort suchen. Hier sind meine Vorschläge:

Schauen Sie sich das an: Angular 2 - AbstractControl

Ich denke, Sie könnten Folgendes tun:

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
       this.formGp.controls['numberFld'].updateValueAndValidity();
    }
});

Dies sollte die Validatoren auslösen und ausführen. Außerdem wird auch der Zustand aktualisiert. Jetzt sollten Sie in der Lage sein, den Kontrollkästchenwert in Ihrer Validierungslogik zu konsultieren.

Hoffe das hilft!

BEARBEITEN: Link und Beispiel aktualisiert. Der Code wurde geändert, während ich meine Antwort schrieb.

EDIT_2: alpha.48 ändert den EventEmitter.observer in EventEmitter.subscribe!

EDIT_3: Link zur tatsächlichen Implementierung geändert, Link zu den Dokumenten hinzugefügt

Validaton-Guide

FormControl-Dokumentation

Mit meiner ControlGroup mache ich das, weil ich Fehler habe, die prüfen, ob sie berührt werden

for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}

(this.form ist meine ControlGroup)

Mit Hilfe dieses Blogs

Blog-Link

Ich habe eine Lösung mit der Kombination aus Nightking-Antwort gefunden

Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});

this.orderForm ist die Formulargruppe

Das hat den Trick für mich getan

this.myForm.markAllAsTouched();

Es gibt elegantere Möglichkeiten, dieses Verhalten zu modellieren - zum Beispiel Ihren Status in ein ReplaySubject zu setzen und dies zu beobachten und dann asynchrone Validatoren zu verwenden, die den Status beobachten -, aber der folgende pseudocodierte Ansatz sollte funktionieren. Sie beobachten einfach die Wertänderungen im Kontrollkästchen, aktualisieren das Modell entsprechend und erzwingen dann eine erneute Validierung der numberFld mit dem cal updateValueAndValidity.

constructor(builder: FormBuilder) {
  this.formData = { num: '', checkbox: false };
  const numberFld = builder.control(this.formData.num, myValidators.numericRange);

  const checkbox = builder.control(this.formData.checkbox);
  checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
    this.formData.checked = bool;
    numberFld.updateValueAndValidity(); //triggers numberFld validation
  });

  this.formGp = builder.group({
      numberFld: numberFld,
      checkboxFld: checkbox
  });
}

static minMaxRange(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (Validators.min(min)(control)) { // if min not valid
            return Validators.min(min)(control);
        } else {
            return Validators.max(max)(control);
        }
    };
}