Weiß jemand, wie trigger-Formular-Validatoren in Angular2?

In angular2 ich will trigger-Prüfungen für einige Steuerelemente, wenn ein anderes Steuerelement geändert wird. Gibt es eine Möglichkeit, ich kann nur sagen, das Formular erneut zu validieren? Besser noch, kann ich den Antrag für die Validierung bestimmter Felder?

Beispiel:
Angesichts Checkbox X und input-P.
Input-P hat einen validator, der verhält sich unterschiedlich, basierend auf dem Modell-Wert von X.
Wenn X ist markiert/nicht markiert ich muss zum aufrufen der validator auf P. Der Validator auf P wird der Blick auf das Modell, um zu bestimmen, den Zustand X und validieren wird P entsprechend.

Hier einige 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']);
    }
});

Jemand eine Lösung? Danke!

Sind Sie gerade versuchen zu aktivieren/deaktivieren Sie die Validierung auf der Grundlage der Wert von X? Welche Art von Prüfungen Sie mit? Sie führen Prüfungen zu führen, basierend auf einem Zustand, in Ihrem Umfang, aber ich bin mir nicht sicher, ob dieser Ansatz für Sie arbeiten. Siehe: stackoverflow.com/questions/21370006/...
Ich bin mit angular2.
könnten Sie bitte erklären, wie übergeben Sie das Kontrollkästchen Status, um die validator-Funktion?

InformationsquelleAutor Bonneville | 2015-08-27

59

Ich weiß nicht, ob Sie noch auf der Suche nach einer Antwort, also hier meine Vorschläge:

Haben Sie einen Blick auf diese: Eckige 2 - AbstractControl

Ich denke, was Sie tun könnten, ist folgende:
```
this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
       this.formGp.controls['numberFld'].updateValueAndValidity();
    }
});
```
Dieser auslösen soll, und führen Sie die Prüfungen. Außerdem bekommt der Staat auch aktualisiert. Jetzt sollten Sie in der Lage, konsultieren Sie das Kontrollkästchen Wert in Ihrem validator Logik.

Hoffe, das hilft!

EDIT: link Aktualisiert und Beispiel. Code geändert, während ich schrieb, kam meine Antwort.

EDIT_2: alpha.48 änderungen der EventEmitter.Beobachter EventEmitter.abonnieren!

EDIT_3: link Geändert, um die tatsächliche Umsetzung, link Hinzugefügt, um die Dokumente

Validaton-Guide

FormControl Dokumentation
- Danke @Nightking für die Anregung, ich werde es ausprobieren. Beachten Sie, dass Ihr link nicht funktioniert.
- Vielen Dank für die Informationen. Sie extrahiert den form-code, um das common-namespace. Die Dinge ändern sich ein bisschen zu schnell :). Ich habe aktualisiert, der link zu der Quelle.
- Ich habe endlich um, um mit diesem Stück code, und es scheint zu funktionieren für mich. Danke! BTW, es ist ein Tippfehler im code: die Buchstaben 'e' fehlt in der updateValueAndValidity () - Funktion. Dein code hat updat statt update. Cheers, war dies eine große Hilfe!
- Vielen Dank für Ihren Kommentar! Toll, dass dieses für Sie arbeitet! Könnten Sie upvote oder markieren Sie meine Antwort? Für meinen guten Ruf :).
- Link ist gebrochen; kann aktualisiert werden, um github.com/angular/angular/blob/master/packages/forms/src/... ist zwar nicht ganz das gleiche. Könnte auch eine Verknüpfung mit Winkel-docs
- Life saver!! Der use case, dass ich stecken geblieben war, wenn der Benutzer ein Formular abschickt, ohne Sie zu berühren eine einzige Formular-Steuerelement. Das Formular ist ungültig, aber die Kontrollen, wo nicht, zeigt keine Fehlermeldung
- danke. Wir hatten den gleichen use-case hier. Ich muss noch erwähnen, dass vielleicht, die Sie gehen durch alle Steuerelemente auf einem FormGroup und rufen "updateValueAndValidity()", weil diese Funktion nur Kontrollen, es sind eigene Gültigkeit und die Eltern werden. Also, wenn Sie es nennen, auf eine FormGroup es nur Blasen, die nach oben und prüfen nicht die anderen Steuerelemente. Dachte, das könnte vielleicht hilfreich sein 🙂
InformationsquelleAutor Nightking
26

mit meinem ControlGroup ich Tue dies, weil ich Fehler divs prüfen, ob berührt
```
for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}
```
(dies.form ist mein ControlGroup)
- Dies sollte die richtige answear.
- markAsDirty() für mich gearbeitet
InformationsquelleAutor kernowcode
6

Mit Hilfe von diesem blog

blog-link

Ich kam in eine Lösung mit dem kombinieren von Nightking Antwort
```
Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});
```
diese.Bestellformular ist die form, Gruppe

InformationsquelleAutor Altair CA
5

Gibt es elegantere Möglichkeiten der Modellierung dieses Verhaltens - zum Beispiel, indem Sie Ihren Staat in eine ReplaySubject und die Beobachtung, dass, und dann mit asynchronen Validatoren Beobachtung der Staat - aber die pseudo-codiert Ansatz unten sollte funktionieren. Sie einfach beobachten, ändert sich der Wert in der checkbox ist, aktualisieren Sie das Modell als geeignet, erzwingen Sie dann eine re-Validierung der numberFld mit der 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
  });
}
```
InformationsquelleAutor jmreidy

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

InformationsquelleAutor pogiaron

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.