角度表单-在子组件模板中访问FormArray [英] Angular forms - access FormArray in child component template

问题描述

我有一个需要几个FormControl和FormArray作为输入的组件.我正在像这样从子组件访问FormControl:

[formControl]="control"

这很好用，但是我找不到使用FormArray进行相同操作的方法.似乎没有针对它的指令.我想避免传入一堆字符串，并尽可能通过formControlName和formArrayName访问.有办法吗?

解决方案

更新，出现类型错误，已通过jsut纠正

您可以像FormGroup一样使用FormArray，但是要小心使用符号"，如果通常我们使用[formGroup] ="i"，那么现在使用[formGroup] ="group".

只考虑什么是myFormArray.controls

<form [formGroup]="myFormArray">
  <div *ngFor="let group of myFormArray.controls;let i=index" [formGroup]="group">
    <input formControlName="prop1">
    <div *ngIf="group.get('prop1').invalid">Prop1 Required</div>
    <input formControlName="prop2"/>
    <div *ngIf="group.get('prop2').invalid">Prop2 Required</div>
  </div>
</form>

myFormArray=new FormArray([
    new FormGroup({
      prop1:new FormControl('',Validators.required),
      prop2:new FormControl('',Validators.required)
    })
  ])

如果您的formArray是控件的FormArray，请直接使用formControl

<form [formGroup]="myFormArray2">
  <div *ngFor="let group of myFormArray2.controls">
    <input [formControl]="group">
    <div *ngIf="group.invalid">Required</div>
  </div>
</form>

myFormArray2=new FormArray([
    new FormControl('',Validators.required),
    new FormControl('',Validators.required)
  ])

请参见 stackblitz

I have a component that takes several FormControls and FormArrays as inputs. I'm accessing the FormControls from the child component like this:

[formControl]="control"

This works fine, but I can't find a way to do the same with a FormArray. There doesn't appear to be a directive for it. I would like to avoid passing in a bunch of strings and accessing via formControlName and formArrayName if possible. Is there a way to do this?

解决方案

Update there was a type error, jsut corrected

You can use a FormArray like a FormGroup, but be carefully with the "notation", if normally we use [formGroup]="i", now we use [formGroup]="group".

It's only think about what is myFormArray.controls

<form [formGroup]="myFormArray">
  <div *ngFor="let group of myFormArray.controls;let i=index" [formGroup]="group">
    <input formControlName="prop1">
    <div *ngIf="group.get('prop1').invalid">Prop1 Required</div>
    <input formControlName="prop2"/>
    <div *ngIf="group.get('prop2').invalid">Prop2 Required</div>
  </div>
</form>

myFormArray=new FormArray([
    new FormGroup({
      prop1:new FormControl('',Validators.required),
      prop2:new FormControl('',Validators.required)
    })
  ])

If your formArray is a FormArray of controls use directly formControl

<form [formGroup]="myFormArray2">
  <div *ngFor="let group of myFormArray2.controls">
    <input [formControl]="group">
    <div *ngIf="group.invalid">Required</div>
  </div>
</form>

myFormArray2=new FormArray([
    new FormControl('',Validators.required),
    new FormControl('',Validators.required)
  ])

See in stackblitz

这篇关于角度表单-在子组件模板中访问FormArray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！