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無法驗證

回答

相關問題