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.logs street-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没有得到验证

1 个答案: