0

我是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)驗證地址元素
- 其他驗證器(以及其他驗證器)完美地工作。

我錯過了什麼?

+0

你可以用Validator.compose試試你的街道物品。 Validator.compose([])和新的FormControl: street:new FormControl('',Validators.compose(Validators.required,Validators.minLength(6)))等等 – Matsura

+0

Nope => street:new FormControl(''' ,Validators.required)=>沒有區別:validator:null - 空的街道字段仍然是ng有效的。還嘗試撰寫(雙) - 沒有驗證.. ..? – T4NK3R

+0

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

回答

0

明白了 - 我被覆蓋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參數)
- 這樣我就可以保持地址形式建設的一個地方: )