it-swarm.com.de

Weiß jemand, wie man Form Validators in Angular2 auslösen kann?

In angle2 möchte ich Validatoren für einige Steuerelemente auslösen, wenn ein anderes Steuerelement geändert wird. Gibt es eine Möglichkeit, dem Formular zu sagen, dass es erneut bestätigt werden soll? Besser noch, kann ich die Validierung bestimmter Felder anfordern?

Beispiel: Gegebene Checkbox X und Eingabe P . Eingang P hat einen Validator, der sich abhängig vom Modellwert von X ..__ verhält. Wenn X aktiviert/deaktiviert ist, muss ich den Validator auf P aufrufen Validator auf P betrachtet das Modell, um den Zustand von X zu bestimmen, und validiert 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!

56
Bonneville

Ich weiß nicht, ob Sie immer noch nach einer Antwort suchen, deshalb hier meine Vorschläge:

Schauen Sie sich das an: Angular 2 - AbstractControl

Ich denke, was Sie tun könnten, ist folgendes:

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 Wert der Checkbox in Ihrer Prüferlogik einzusehen.

Hoffe das hilft!

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

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

EDIT_3: Geänderter Link zur tatsächlichen Implementierung, Link zu den Dokumenten hinzugefügt

Validaton-Guide

FormControl-Dokumentation

55
Nightking

mit meiner ControlGroup mache ich das, weil ich Fehler habe, wenn die divs überprüft werden, ob sie berührt werden

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

(this.form ist meine Kontrollgruppe)

22
kernowcode

Es gibt elegantere Methoden, dieses Verhalten zu modellieren - zum Beispiel, indem Sie Ihren Status in ein ReplaySubject umwandeln und dies beobachten und dann asynchrone Validatoren verwenden, die den Status beobachten -, aber der unten beschriebene pseudo-codierte Ansatz sollte funktionieren. Sie beobachten einfach die Wertänderungen in der Checkbox, aktualisieren das Modell entsprechend und erzwingen dann eine erneute Validierung der numberFld mit updateValueAndValidity cal.

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
  });
}
5
jmreidy

Mit Hilfe dieses Blogs 

Bloglink

Ich habe eine Lösung mit der Kombination von Nightking gefunden

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

});

this.orderForm ist die Formulargruppe

2
Altair CA
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);
        }
    };
}
0
pogiaron