Dynamic From FormArray新添加的控件更改未传播-Java 学习之路

注意到angular5表单使用构建器构造一个包含捕获其他动态数据所需的表单数组的表单的奇怪行为，表单数组值仅在更新时才更新

在创建初始表单控件的过程中添加到表单数组 this.formBuilder.array(this.getRow())
触摸第一个初始控件时

Angular version 5.2.0 Experimental/Sample Code Here

Point 1/2 Addendum

更改似乎仅在未动态添加到FormArray的组件上注册

表单数组元素包含初始化过程的代码

ngOnInit(){
    this.form = this.formBuilder.group({
      name:[null],
      description:[null],
      hobbies:this.formBuilder.array([this.getRow()])
    });
  }

  getRow():FormGroup{
    return this.formBuilder.group({
      hobby:[null],
      description:[null]
    });
  }

enter image description here

虽然很明显，在创建的附加控件中，它们都是空的

但是，只要触摸第一个元素（注意到从钓鱼到钓鱼4的变化，控制台输出现在具有剩余动态添加控件的值），所有新的动态字段值都会被传播

enter image description here

1 回答

在您的HTML更改中：

<form [formGroup]="form.controls.hobbies">

和

<tr *ngFor="let hobby of form.get('hobbies').controls; let r=index;" [formGroupName]="r">
     <td><input type="text" formControlName="hobby"></td>
     <td><input type="text" formControlName="description"></td>
  </tr>

通过：

<div formArrayName="hobbies">
    <div *ngFor="let hobby of form.get('hobbies').controls; let r=index;">
        <div [formGroupName]="r">
             <td><input type="text" formControlName="hobby"></td>
             <td><input type="text" formControlName="description"></td>
        </div>
    </div>
</div>

查看这篇文章：

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

回复于 2024-04-26T03:49:12+08:00

Dynamic From FormArray新添加的控件更改未传播

1 回答

相关问题