ControlValueAccessor与FormArray成角

Question

如何将formArray传递给子项目组件？

项目组件没有一个does组(在父级中定义)，我得到了一个错误：Error: formArrayName must be used with a parent formGroup directive

ParentComponent

• ListComponent
  • ListItemComponent

// structure:
form = new FormGroup({
    articles: new FormArray([])
}

<articles-list [articles]="articles" formArrayName="articles"></articles-list>

<article [formControlName]="article.id" *ngFor="let article of articles" [article]="article"></article>

表格结构应是：

parent {
 articlesList: article[]
}

Answer 1

确保在[formGroup]中嵌套您的文章列表组件。

<form [formGroup]="form">
    <articles-list [articles]="articles" formArrayName="articles">
    </articles-list>
</form>

    
<!-- You can try something like this - just incorporate your custom components ->
<form [formGroup]="form">
    <div formArrayName="articles">
        <div *ngFor="let child of form.controls.articles.controls; let i=index;">
            <div class="form-group stagger" formGroupName="{{i}}">
                <input formControlName="sampleField" />
            </div>
        </div>
    </div>
</form>

Answer 2

当将FormControl/或FormArray传递给组件时，组件可以实现ControlValueAssesor -the类似于另一个输入，或者我们可以传递FormControl/FormArray -nor formArray名称。

当我们使用FormArray时，建议在.ts中使用getter

articlesFormArray get()
{
    return this.form.get('articles') as FormArray
}

因此，您可以将formArray作为参数传递

<articles-list [myFormArray]="articlesFormArray"></articles-list>

在文章中--清单

@Input() myFormArray:FormArray

//create a new getter to get the FormGroup of the formArray, 
get formGroup(i)
{
    return myFormArray.at(i) as FormGroup
}

<div *ngFor="let control of myFormArray.controls;let i=index">
     <div [formGroup]="formGroup(i)">
          <input formControlName="articleId">
     </div>
</div>

我们的子程序是否是FormGroup，您可以传递formGroup，在子组件之前的示例中可以这样做。

@Input('group') form:FormGroup //<--the name is group, but the variable "form"
                               //it's only show a characteristic of Inputs
<div [formGroup]="form">
  <input formControlName="articleId">
</div>

我们可以替换文章中的使用-list.html。

<div *ngFor="let control of myFormArray.controls;let i=index">
     <children-component [group]="formGroup(i)">
</div>