Angular2 Formbuilder mit FormArray erhält keine Validierung

Question

Ich bin neu in Angular2 (oder 4?), Arbeiten sich durch die Grundlagen ..
In der Forms/Reactive Forms - ein Array von Adressen sind ohne Probleme hinzugefügt.

jedoch versucht Validatoren zu den Adressunterelemente hinzufügen funktioniert nicht:
Hier ist meine Form Gebäude:

constructor(
    private fb: FormBuilder 
    ){ 
    this.createForm(); 
    } 

createForm() { 
    this.heroForm = this.fb.group({ 
     name: ['', [Validators.required, Validators.minLength(6)]], 
     secretLairs: this.fb.array([ 
      this.fb.group({ 
       street: ['', [Validators.required, Validators.minLength(6)]], 
       city: [''], 
       state: ['', Validators.required], 
       zip: [''] 
      }) 
     ]), 
     power: ['',Validators.required], 
     sidekick: '' 
    }); 
} 

get secretLairs(): FormArray { 
    return this.heroForm.get('secretLairs') as FormArray; 
} 

und (zum Teil) meine Vorlage:

<div formArrayName="secretLairs" class="well well-lg"> 
    <b class=header>Secret Lairs</b> 
    <div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" > 

{{ showMe(i, address.controls.street) }} 

     <h4>Address #{{i + 1}}</h4> 
     <div style="margin-left: 1em;"> 
      <div class="form-group"> 

       <label class="center-block">Street:</label> 
       <input class="form-control" trim formControlName="street"> 

       <label class="center-block">City:</label> 
       <input class="form-control" formControlName="city"> 

       <label class="center-block">State:</label> 
       <select class="form-control" formControlName="state"> 
        <option *ngFor="let state of states" [value]="state">{{state}}</option> 
       </select> 

       <label class="center-block">Zip Code:</label> 
       <input class="form-control" formControlName="zip"> 

      </div> 
     </div> 
     <br> 
    </div> 
    <button (click)="addLair()" type="button">Add a Secret Lair</button> 
</div> 

Die ShowMe Funktion: console.logs die Street-FormControl
- die Null in beiden Validator und AsyncValidator ..?
Und tatsächlich findet keine (in) Validierung statt für die Adress-Elemente
- die anderen Validatoren (und alles andere) funktioniert perfekt.

Was fehlt mir?

Answer 1

Verstanden - ich war die formArray überschrieben wird, wenn neue Daten angekommen (ngOnChanges):

setAddresses(addresses: Address[]) { 
    const addressFGs = addresses.map(address => this.fb.group(address)); 
    const addressFormArray = this.fb.array(addressFGs); 
    this.heroForm.setControl('secretLairs', addressFormArray); 
} 

this.fb.group(address) 4 neue formControls erstellt nur mit (default) Werte - keine Validatoren.

Alternative:

createForm() { 
    this.heroForm = this.fb.group({ 
     name:  ['', [Validators.required, Validators.minLength(6)]], 
     secretLairs: this.fb.array([]),       // no controls yet 
     power:  ['',Validators.required], 
     sidekick: '' 
    }); 
} 

setAddresses(addresses: Address[]) { 
    this.heroForm.setControl('secretLairs', new FormArray([])); // rough reset! 
    addresses.map(address => this.addLair(address)); 
} 

addLair(adr) { 
    this.secretLairs.push(this.fb.group({ 
     street: [(adr)?adr.street:'', [Validators.required, Validators.minLength(4)] ], 
     city: (adr)?adr.city :'', 
     state: [(adr)?adr.state :'', Validators.required], 
     zip:  (adr)?adr.zip :'' 
     } 
    )); 
} 

get secretLairs(): FormArray { 
    return this.heroForm.get('secretLairs') as FormArray; 
} 

Die addLair() auch durch eine Taste wird eine neue Adresse (kein adr Parameter)
anhängen - So kann ich an einer Stelle die Adresse-Form-Gebäude halten:)