Angular2 RC: Hinzugefügt Steuerelemente mit addControls Methode nach der Erstellung der ControlGroup funktioniert nicht

Question

Ich habe eine von denen fügt andere Felder hinzu (Ich füge neue Steuerelemente, weil sie nur aus der Vorlage mit * ngIf versteckt sie nicht aus dem Formular ausschließt und führt daher zu einer ungültigen Form) basierend auf der ausgewählten Option aus einer Auswahloption. Ich füge neue Steuerelemente zu dem verfügbaren Formular hinzu, das die AddControl-Methode eines Formulars in Angular2 verwendet. Die Steuerelemente werden korrekt hinzugefügt, aber ich weiß nicht, warum die Werte dieser hinzugefügten Steuerelemente nach Benutzereingaben nicht aktualisiert werden. Hier ist die Art, wie ich neue Steuerelemente zum Formular am Zusatz:

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

Es sieht so aus, dass Winkel nicht diese neuen Felder erkannt haben. Ich denke, es ist etwas mit AbstractControl verwandt, aber die Dokumentation fehlt darauf. Hier ist der Schnappschuss des Problems, dass die dynamisch hinzugefügten Steuerelemente nicht von eckel aufgenommen werden.

Um das Problem zu zeigen, habe ich ein einfaches Beispiel im folgenden Plunker erstellt (bitte gehen Sie zu Version 2, um dieses Problem zu replizieren).

https://plnkr.co/edit/RI4JL4Pnf2LrJ3TsxsSt?p=preview

Was mache ich falsch und wie es mit dem aktuellen Setup funktioniert? Welche anderen Optionen bieten dasselbe Verhalten?

Vielen Dank für Ihre Hilfe

Umgehung:

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

    } 
} 

Answer 1

Zum Beispiel nur die required Validierung zu tun, wenn teacherCode.value einen Wert hat:

this.signUpForm.addControl("teacherCode", new Control("", 
     (c:Control) => { 
      if(this.signUpForm.controls['teacherID'].value) { 
      return Validators.required(c); 
      } 
     }) 
    );