Auslösen von Formularvalidatoren in angular2

Question

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

Beispiel: Gegeben Ankreuzfeld X und Eingabe P. Eingang P ein Validator hat, die auf dem Modellwert von X anders verhält basierend Wenn X markiert ist/nicht markiert I vom Validator auf P. Der Validator auf aufzurufen P betrachtet das Modell, um den Zustand von X zu bestimmen, und validiert 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']); 
    } 
}); 

Wer eine Lösung? Vielen Dank!

Answer 1

Ich weiß nicht, wenn Sie noch nach einer Antwort suchen, ist so hier meine Vorschläge:

einen Blick auf diese: Angular 2 - AbstractControl

Ich denke, was Sie tun können, ist folgende:

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 der Status aktualisiert. Jetzt sollten Sie in der Lage sein, den Checkbox-Wert in Ihrer Validierungslogik zu konsultieren.

Hoffe, das hilft!

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

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

EDIT_3: Geänderte Link zur eigentlichen Implementierung hinzugefügt Link zu den Dokumenten

Validaton-Guide

FormControl Documentation

Answer 2

mit meiner Kontrollgruppe ich dies tun, weil ich Fehler divs habe überprüft, ob berührt

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

(this.form ist meine ControlGroup)

Answer 3

Es gibt elegantere Möglichkeiten, dieses Verhalten zu modellieren - zum Beispiel, indem Sie Ihren Status in ein ReplaySubject setzen und dies beobachten und dann asynchrone Validatoren verwenden, um den Zustand zu beobachten - aber der unten beschriebene pseudokodierte 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 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 
    }); 
}