有没有办法使用 FormArray 作为顶级表单

Question

我正在使用@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'

我确实在我的功能模块中包含了 FormsModule 和 ReactiveFormsModule。基于 FormGroup 工作的任何其他形式。

如果我这样做，它有点管用 <ol [formGroup]="form"> 但它似乎是一个奇怪的 hack，而且验证似乎被破坏了。而且我担心无论如何在为产品构建时它都会崩溃。

那么有没有办法使用 FormArray 作为顶级表单？理想情况下，我想避免创建其中包含单个 FormArray 的 FormGroup。

Answer 1

是的，您可以使用 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>

这是 stackblitz

上的工作 demo

有没有办法使用 FormArray 作为顶级表单

Is there a way to use a FormArray as the top level form

angular

angular-forms