以 angular 反应形式添加嵌套字段

Question

我正在使用 Angular 6 并在 Django.[=15= 中编写了 API ]

我有一个 Profile 模型在 User 模型下序列化。

使用 Postman 我可以将记录保存到 个人资料 就像

# JSON
{
    'name': 'John',
    'profile': {
       'about': 'About me string'
    }
}

# or form field
name = 'John'
profile.about = 'About me string'

现在，在 Angular 应用程序中，我正在尝试以与上述相同的格式将数据发送到端点。为此，formGroup 就像

this.aboutForm = this.fb.group({
  profile: this.fb.group({
    about: new FormControl('', [
        Validators.required
    ])
  })
});

当 HTML 形式像

<form [formGroup]="aboutForm" (submit)="submit()" #form="ngForm">
    <textarea formControlName="profile.about"></textarea>
</form>

但这是错误的

error service Error: "Cannot find control with name: 'profile.about'"

Answer 1

对于嵌套控件，您应该使用 formGroupName 而不是 formControlName。

用 formGroupName=profile 将 div 内的 textarea 括起来，然后将 formControlName=about 用于 texarea

以 angular 反应形式添加嵌套字段

adding nested field in angular reactive form

angular

angular-reactive-forms