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.
Angular2 RC: hinzufügen von Steuerelementen mit addControls Methode nach der Erstellung der ControlGroup nicht funktioniert

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.
InformationsquelleAutor Afi | 2016-05-27
Schreibe einen Kommentar