Angular2 RC: hinzufügen von Steuerelementen mit addControls Methode nach der Erstellung der ControlGroup nicht funktioniert
Ich habe einen aus, fügt verschiedene Felder (ich bin neue Steuerelemente hinzufügen, da nur das verstecken von die Vorlage mit *ngIf nicht ausschließen, Sie aus der form und daher resultiert in Ungültiger form), basierend auf der ausgewählten option in einem select-option. Ich bin neue Steuerelemente hinzufügen, um die form mit addControl-Methode von einem Formular in Angular2. Die controls werden korrekt Hinzugefügt, aber ich weiß nicht, warum die Werte der hinzugefügten Steuerelemente nicht aktualisiert, wenn der Benutzer die Eingaben. Hier ist der Weg, ich bin das hinzufügen neuer Steuerelemente zum Formular:
signUpForm: ControlGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.signUpForm = this.fb.group({
firstName: ["", Validators.required],
lastName: ["", Validators.required],
group: ["", Validators.required]
});
}
modifyControls(selectedGroup): number {
if (selectedGroup == 1) {
if (this.signUpForm.contains("studentID")) {
this.signUpForm.removeControl("studentID");
}
this.signUpForm.addControl("teacherCode", new Control("", Validators.required));//need some custome validations
this.signUpForm.addControl("teacherID", new Control("", Validators.required));
return 1;
}
else if (selectedGroup == 2) {
if (this.signUpForm.contains("teacherCode")) {
this.signUpForm.removeControl("teacherCode");
this.signUpForm.removeControl("teacherID");
}
this.signUpForm.addControl("studentID", new Control("", Validators.required));
return 2;
}
}
Sieht es aus wie, dass eckig nicht erkannt, die diese neuen Felder. Ich denke, es hat etwas mit AbstractControl aber die Dokumentation fehlt auf, dass. Hier ist der snapshot von dem problem, dass die dynamisch Hinzugefügt werden, sind die Steuerelemente nicht abgeholt eckig.
Zeigen das problem, das ich erstellt haben, ein einfaches Beispiel in den folgenden plunker (gehen Sie bitte auf die version 2 zu replizieren, dieses problem).
https://plnkr.co/edit/RI4JL4Pnf2LrJ3TsxsSt?p=preview
Was mache ich falsch und wie machen Sie es mit dem aktuellen setup?
Was sind andere Optionen für die Erreichung der das gleiche Verhalten?
Danke für Eure Hilfe
Problemumgehung:
modifyControls(selectedGroup) {
if (selectedGroup == 1) {
this.signUpForm.controls['teacherCode'].validator = Validators.required;
this.signUpForm.controls['teacherCode'].updateValueAndValidity();
this.signUpForm.controls['teacherID'].validator = Validators.required;
this.signUpForm.controls['teacherID'].updateValueAndValidity();
this.signUpForm.controls['studentID'].validator = null;
this.signUpForm.controls['studentID'].updateValueAndValidity();
}
else if (selectedGroup == 2) {
this.signUpForm.controls['teacherCode'].validator = null;
this.signUpForm.controls['teacherCode'].updateValueAndValidity();
this.signUpForm.controls['teacherID'].validator = null;
this.signUpForm.controls['teacherID'].updateValueAndValidity();
this.signUpForm.controls['studentID'].validator = Validators.required;
this.signUpForm.controls['studentID'].updateValueAndValidity();
}
}
- Ich fand einen workaround in meinem Fall durch das hinzufügen von Prüfungen und aktualisieren Sie Sie auf dem Flug, sondern weil ich immer noch nicht den Grund gefunden, dass mein ursprünglicher code hat nicht funktioniert bin ich nicht schließen kann die Frage als gelöst.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beispielsweise zu tun, die
required
Validierung nur, wennteacherCode.value
hat einen Wert:teacherID
existiert nicht in dieser Zeit. Ich nicht die Mühe zu untersuchen, was Sie wirklich wollen, zu überprüfen. Besifes, dass ich bin sicher, es wird funktionieren.