Angular 角嵌套形式

我正在尝试一个嵌套的反应式表单

当我试图显示嵌套数组时，我得到一个错误“找不到路径为：'contact->phone->0->number'的控件”

这是我的有效载荷

     {
          "_id": "5ddb9fa8545eb65b5b28a471",
          "contact": {
            "addressLocation": {
              "apartment": "34",
              "balding": "43",
              "street": "some street"
            },
            "iconImage": "",
            "mail": "noman@gmail.com",
            "phone": [
              {
                "name": "ABC",
                "number": "0548888888"
              }
            ]
          },
          "content": "some content",
          "title": "some title",
          "type": "regular",
          "userId": "5d96545b7d84d2201abc879",
          "updatedAt": "2019-11-25T09:32:24.886Z"
        }

这是我的HTML

      <form [formGroup]="formC" (ngSubmit)="onSubmit()">

            <div [formGroupName]="'contact'">

                <div [formGroupName]="'addressLocation'">
                    <input type="text" class="form-control" [formControlName]="'apartment'">
                    <input type="text" class="form-control" [formControlName]="'balding'" >
                    <input type="text" class="form-control" [formControlName]="'street'">
      </div>

                    <input type="text" class="form-control" [formControlName]="'iconImage'" >
                    <input type="text" class="form-control" [formControlName]="'mail'">


                    <div [formArrayName]="'phone'">
                        <ul class="subjectList">
                            <li *ngFor="let item of phoneFormArray.controls; let i = index">

                                <div [formGroupName]="i">
                                    <input type="text" class="form-control" [formControlName]="'name'">
                                    <input type="text" class="form-control" [formControlName]="'number'">
              </div>
                            </li>
                        </ul>
                    </div>
                </div>

        </form>

我错过了什么

---

感谢使用表单数组时，您需要通过实际创建表单组并将其推入数组来设置其值：

  constructor(public fb: FormBuilder) {
     this.formC.patchValue(this.data);
     this.data.contact.phone.forEach(p => this.addPhone(p))
  }

  addPhone(p) {
    const fg = this.blankPhoneFg
    fg.setValue(p)
    this.phoneFormArray.push(fg)
  }

  get blankPhoneFg() {
    return this.fb.group({
      name: ['', Validators.required],
      number: ['', Validators.required],
    })
  }

还要将数组初始化为空：

phone: this.fb.array([]),

如果要使用空组对其进行初始化，则需要确保将实际组而不是对象放入其中：

phone: this.fb.array([this.blankPhoneFg]),

修正闪电战：

你可能需要做一些事情，比如在末尾添加一个空组，或者如果没有电话或其他东西，不管你需要什么