Angular2 formbuilder与formArray无法验证

我是Angular2（或4？）的新手，正在通过基本原理工作。
在Forms/Reactive Forms中 - 添加了一组地址，没有问题。Angular2 formbuilder与formArray无法验证

但是试图验证添加到地址子元素不起作用：
这是我的形式建设：

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

和（部分）我的模板：

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

的ShowMe函数：console.logs street-formControl
- 它在验证器和asyncValidator中都显示为空。
确实没有（in）验证地址元素
- 其他验证器（以及其他验证器）完美地工作。

我错过了什么？

来源

2017-08-22 T4NK3R

你可以用Validator.compose试试你的街道物品。 Validator.compose（[]）和新的FormControl： street：new FormControl（''，Validators.compose（Validators.required，Validators.minLength（6）））等等 – Matsura

Nope => street：new FormControl（''' ，Validators.required）=>没有区别：validator：null - 空的街道字段仍然是ng有效的。还尝试撰写（双） - 没有验证.. ..？ – T4NK3R

所有工作都很好https://plnkr.co/edit/RpcfJZSZToF5UWoKzdLh?p=preview尝试在'Street'字段中输入 – yurzui

明白了 - 我被覆盖formArray当新的数据到达（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个新formControls只（默认）值 - 无验证。

备选：

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

的addLair（）也被用来通过一个按钮来添加一个新的地址（无ADR参数）
- 这样我就可以保持地址形式建设的一个地方：）

来源

2017-08-22 15:25:59 T4NK3R

Angular2 formbuilder与formArray无法验证

回答

相关问题