Angular2 RC: Aggiunti controlli con il metodo addControls dopo la creazione del ControlGroup non funziona

Question

Ho un da che aggiunge campi diversi (Sto aggiungendo nuovi controlli perché semplicemente nascondendoli dal modello usando * ngIf non li esclude dal modulo e quindi genera un modulo non valido) in base all'opzione selezionata da un'opzione di selezione. Sto aggiungendo nuovi controlli al modulo disponibile usando il metodo addControl di un modulo in Angular2. I controlli vengono aggiunti correttamente, ma non so perché i valori di questi controlli aggiunti non vengono aggiornati dopo gli input dell'utente. Qui è il modo in cui sto aggiungendo nuovi controlli al form:

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

Sembra che angolare non riconosciuto quei nuovi campi. Penso che sia qualcosa di correlato a AbstractControl ma la documentazione non è all'altezza. Ecco l'istantanea del problema, che i controlli aggiunti dinamicamente non vengono rilevati da angolari.

Per mostrare il problema, ho creato un semplice esempio nel seguente plunker (andare alla versione 2 per replicare questo problema).

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

Che cosa sto facendo di sbagliato e come farlo funzionare con la configurazione attuale? Quali sono le altre opzioni per ottenere lo stesso comportamento?

Grazie per il vostro aiuto

Soluzione:

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

Ad esempio, per fare la convalida required solo quando teacherCode.value ha un valore:

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