首页 文章

无法通过路径'myFormArray - > [index] - > myProperty找到控件

提问于
浏览 次
2

我'm trying to generate a dynamic form using Angular ReactiveForms. Currently I'm收到错误 Cannot find control with path 'myFormArray -> [index] -> myProperty . 我已经检查了一些在互联网上找到的答案但没有成功 . 这是我的代码：

HTML:

<form [formGroup]="myForm">
    <div formArrayName="myFormArray" *ngFor="let ctrl of foo.controls; let i=index">
        <div [formGroupName]="i">
            <input matInput type="text" formControlName="myProperty">
        </div>
    </div>
</form>

TS:

export class MyClass implements OnChanges {

  @Input() myData: any;

  myForm: FormGroup;

  get foo(): FormArray{
    return <FormArray>this.myForm.get('myFormArray');
  }

  constructor(private fb: FormBuilder) { }

  ngOnChanges() {
    if (!this.myForm) {
      this.myForm = this.fb.group({
        myFormArray: this.fb.array([this.buildMyFormArray()])
      });
    }

    this.myForm.setControl('myFormArray', this.fb.array(myData || []));
  }

  buildMyFormArray(): FormGroup {
    return this.fb.group({
      myProperty: ''
    });
  }
}

myData 来自父作为组件中的输入，它看起来像

myData: [
    { myProperty: 'John Doe' },
    { myProperty: 'Jane Doe' },
    { myProperty: 'Jack Doe' }
]

数据数组中的每个项目都会在中间更改索引时发生错误 .

你能帮助我吗？谢谢

angular angular-reactive-forms reactive-forms formarray

1 回答

  • 5

    你的 myFormArray 控件应该是 FormGroup 的 FormGroup ，但你正在创建 FormControl 的 FormControl .

    那么让我们尝试以下方法：

    this.myForm.setControl('myFormArray', 
   this.fb.array((this.myData || []).map((x) => this.fb.group(x))));

    Ng-run Example

    回复于

相关问题