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'

我DID在我的功能模块中包括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>

这是demo上的闪电战作品

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

1 个答案: