如何在表单中绑定嵌套对象？

Question

我以这种方式将从 API 接收到的数据绑定到表单：

 // json data
 export class Recipe {
    _id: String;
    nome: String;
    tipo: Number;
    panetti: Number;
 }

 // ts (load data from API)
 this.form = this.fb.group({
    nome: [data.nome, [Validators.required]],
    tipo: [data.tipo, [Validators.required]],
    panetti: [data.panetti, [Validators.required]]
 });
 
 // component
 <mat-form-field>
    <input matInput type="text" formControlName="nome">
 </mat-form-field>

但是如果对象变得复杂，我该如何做呢？如：

 // json data
 export class Recipe {
    _id: String;
    nome: String;
    tipo: Number;
    panetti: Number;
    ingredienti: {
        newField1: Number,
        newField2: Number,
        newArray: [
            {
                arrayField1: Number,
                arrayField2: Number
            }
        ];
    }
 }

在这种情况下如何绑定 newField1 和 newArray/arrayField*？

Answer 1

对于 'ingredienti'，您将拥有另一个表单组。像

 this.form = this.fb.group({
  nome: [data.nome, [Validators.required]],
  tipo: [data.tipo, [Validators.required]],
  panetti: [data.panetti, [Validators.required]],
  ingredienti: this.fb.group({
    newField: ['initialValue'],
    secondField: ['initialValue'],
  })
});

如果您有一个动态数组字段，对于 'newArray' 您可以使用 FormArray。看这里 https://angular.io/api/forms/FormArray.

编辑 Markzz 评论：在您的 html 表单标签上，您使用的是 [formGroup]="form"。在其中（您想在哪里显示其余字段），您正在使用 'formGroupName'。（最好与 ng-container 一起使用，因为它不会呈现给 dom）。

如何在表单中绑定嵌套对象？

How to bind nested object within Form?

bind

angular