以角度反应形式添加嵌套字段答案

【问题标题】：adding nested field in angular reactive form以角度反应形式添加嵌套字段
【发布时间】：2019-02-16 17:08:30
【问题描述】：

我正在使用 Angular 6 并在 Django 中编写过 API。

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

使用 Postman 我可以将记录保存到 Profile 像

# 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'"

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

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

用formGroupName=profile 将textarea 括在div 中，然后将formControlName=about 用于您的texarea

【讨论】：

formGroupName 的值应该是多少？