Angular 具有角度格式数组的ControlValueAccessor

如何将formArray传递给子文章组件

项目组件没有formgroup（在父级中定义），我得到一个错误：

error:formArrayName必须与父级formgroup指令一起使用

父组件

• 列表组件
  • ListItemComponent

---

确保将您的文章列表组件嵌套在

当将FormControl/FormArray传递给组件时，组件可以实现ControlValueAssessor（与另一个输入类似），也可以传递FormControl/FormArray-itseft（或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>

@Input（）myFormArray:FormArray
//创建新的getter以获取formArray的FormGroup，
获取表单组（i）
{
将myFormArray.at（i）作为FormGroup返回
}

如果我们的children mannage是一个FormGroup，您可以传递FormGroup，想象在示例中前面有一个children组件

@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>

@Input（'group'）表单：FormGroup//It is。。但是formGroup在父级中，在listcomponent中只有一个formarraynameDo我需要在父级和子级中创建formGroup吗？@Mackelito我已经更新了我的答案-尝试一下，它应该会起作用。如果所有内容都在同一个文件中，并且没有子级组件，它会起作用。这种方法的一个问题是它需要自定义@输入。。难道不能像formGroup那样使用表单指令吗？我在这里的目标是可重用性，因此如果可以在顶级父级中定义表单，然后使用CVA附加来自子级的数据，我会更好。在这种情况下，您可以创建自定义表单控件-如果需要，此表单控件可以存储数组或对象-但在这种情况下，您的组件必须实现ControlValueAccesor。
<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>

articlesFormArray get()
{
    return this.form.get('articles') as 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>

@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>

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