Question

我正在Angular 7中使用反应性表单来构建表单。

首先让我从胸口取下一些东西。《 Angular Guide》的“表单”部分中的信息并不是最容易理解的，尤其是“反应式”表单部分。也许我问这个问题的原因是我实际上不知道应该使用什么反应形式/给我。

随便...

我创建了一个UI，其中包含一些顶级表单控件以及一个允许用户添加/删除多个项目的部分。

这是我对某些数据建模的方式。这个东西有一个数组，几乎和其他动态嵌套数组示例一样。

export interface IInterestingChoice{
  description: string;
  outcome: string;
}

export interface IMyDataThing {
  firstName: string;
  lastName: string;
  lifeChoices: IInterestingChoice[];
}

所以我已经去创建了组件并定义了FormGroup：

export class SadComponent implements OnInit{
  @Input()
  public data: IMyDataThing;

  public theForm: FormGroup;

  public get lifeChoices() {
    return this.theForm.get("lifeChoices") as FormArray;
  }

  constructor(private formBuilder: FormBuilder) {
    this.theForm = formBuilder.group({
      firstName: [null, Validators.required],
      lastName: [null, Validators.required],
      lifeChoices: formBuilder.array([
        formBuilder.group({
          description: [null, Validators.required],
          outcome: [null]
        })
      ])
    });
  }

  onNgInit() {
    this.theForm.patchValue(this.data);
  }

  iWantToSaveThis() {
    const newDataState = this.form.value;

    Object.assign(this.data, newDataState); 
  }
}

在未加载任何组件的情况下加载组件时，这些字段为空白，并且在用户输入数据时会进行验证。我可以添加/删除。在form元素上，我有(submit)="iWantToSaveThis()"。数据已保存，我微微一笑。

因此，数据将被设置为data属性，因为用户已经填写了以前的表格并再次加载了视图：

{
  firstName: "Mike",
  lastName: "G",
  lifeChoices: [
    {
      description: "College",
      outcome: "Degree"
    },
    {
      description: "Software engineering job",
      outcome: "Depression"
    }
  ]
}

现在，当绘制UI时，我仅获得表单中数组的第一个位置。

为什么？

据我了解，我需要更改ngOnInit来执行以下操作：

  ngOnInit() {
    this.theForm.patchValue(this.data);

    for (const choice of this.data.lifeChoices) {
      this.lifeChoices.push(this.formBuilder.group({
        description: [choice.description, Validators.required],
        outcome: [choice.outcome]
      });
    }
  }

对我来说，这似乎毫无意义。看来，我们已经进入了JavaScript中世纪。我们对数据进行了分解，并将其分配为表单值，以便在用户完成操作后最终调用Submit并将其发布到端点。我们可以使用<button type="reset">Be Gone!</button>来清除表单，而无需进行任何进一步的交互。

我们从反应式表单中获得的唯一信息是表单中数据的不可变状态吗？这不是为什么我要使用ngrx吗？！

因此，为了减少麻烦，我想知道是否有一种方法可以使FormGroup上的嵌套数组获取一个事实，即它有一个空对象，而其他所有对象修补程序应遵循相同的格式，例如模板。

是的，我明白了。减轻...

这是一个正在运行的应用程序：https://angular-pmugex.stackblitz.io

（编辑：https://stackblitz.com/edit/angular-pmugex）

可以制作角反应性窗体来创建FormArray中的所有元素吗？

0 个答案: