带有 formArray 的 Angular2 formbuilder 没有得到验证

Question

我是 Angular2（或 4？）的新手，正在学习基础知识..
在 Forms/Reactive Forms - 添加地址数组没有问题。

然而，尝试向地址子元素添加验证器不起作用：
这是我的表单构建：

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.logsstreet-formControl
- 在 validator 和 asyncValidator 中都显示 null..?
事实上，地址元素没有（in）验证发生
- 其他验证器（以及其他所有东西）都运行良好。

我错过了什么？

Answer 1

知道了 - 当新数据到达时我正在覆盖 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 参数）
- 所以我可以将地址表单构建保存在一个地方:)

带有 formArray 的 Angular2 formbuilder 没有得到验证

Angular2 formbuilder with formArray gets no validation

angular

angular2-template

angular2-forms

angular2-formbuilder