有没有办法使用 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">但它似乎是一个奇怪的黑客，并且验证似乎已损坏。而且我担心无论如何它都会在为产品构建时破裂。

那么有没有办法使用 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 上的工作演示