有没有一种方法可以将FormArray用作顶层表单

时间:2018-11-10 12:59:13

标签: angular angular-forms

我正在使用@ ngular / core 6.1.1和@ angular / forms 6.1.1

我正在尝试编写一个ControlValueAccessor,它将管理一组值。

我正在使用反应形式,并这样声明我的形式:

export class ItemsFormComponent implements ControlValueAccor, OnInit {

    public form: FormArray;

    public items: string[] = ['foo', 'bar', 'baz'];

    constructor(private formBuilder: FormBuilder) {
        this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));

        this.form.valueChanges
            .debounceTime(200)
            .subscribe((items: string[]) => {
                this.onChangeFn(items);
            });
    }
}

但是然后,我收到了模板解析错误

<ol [formArray]="form">
    ...
</ol>

Can't bind to 'formArray' since it isn't a known property of 'ol'

我DID在我的功能模块中包括FormsModule和ReactiveFormsModule。任何其他基于FormGroup的表单。

如果我<ol [formGroup]="form">可以使用,但这似乎很奇怪,并且验证似乎已失败。而且,恐怕无论如何为产品生产时,它都会破裂。

所以没有办法将FormArray用作顶层表单吗?理想情况下,我想避免创建其中包含单个FormArray的FormGroup。

1 个答案:

答案 0 :(得分:3)

是的,您可以将FormArray用作顶层表单,

place: FormArray = new FormArray([
      new FormControl('SF'),
      new FormControl('NY'),
]);

在模板中,

<div *ngFor="let c of place.controls; index as i">
  <input [formControl]="c" placeholder="c">
</div>

<ng-container *ngFor="let c of place.controls">
  <pre>{{this.c.value | json}}</pre>
</ng-container>

这是demo上的闪电战作品