无法获得嵌套的 formControlName 离子

Question

我无法在按钮单击时添加新的文本字段

这是我累了的代码，

home.ts

constructor() {
  this.myForm = this._fb.group({
    md: false,
    mdNames: this._fb.group({
      uid: "",
      _rev: "",
      type: "i_org_docs_ref",
      name: "MARINE1",
      details: "Material declaration",
      details_array: this._fb.array([]),
      cdt: ""
    }),
  });

}


addClicked() {

  const control2 = <
    FormArray( < FormGroup > this.myForm.controls['mdNames']).controls['details_array']

  control2.push(this._fb.group({
    mdTextBox: "",
  }));
}

home.html

<div formControlName="mdNames">
  <div formArrayName="details_array">
    <ion-list *ngFor="let obj of myForm.controls.details_array.controls; let i=index">
      <div [formGroupName]="i">
        <ion-item no-lines>
          <button 
            ion-button 
            color="dark" 
            clear 
            icon-only 
            item-end 
            class="deleteBtn"
            (click)="deleteOrgItemClicked(i)">
                    <ion-icon name="ios-trash"></ion-icon>
                </button>
          <ion-input 
            formControlName="mdTextBox" 
            type="text" 
            class="textFields" 
            placeholder="Type details">
          </ion-input>
        </ion-item>
      </div>
    </ion-list>
    <ion-item>
      <button 
        (click)="addClicked()" 
        class="addBtn">
            Add documents
        </button>
    </ion-item>
  </div>
</div>

我想显示 details_array 的值，但它显示此错误： No value accessor for form control with name: 'mdNames'

请帮忙看看我哪里出错了？

Answer 1

DEMO

HTML：

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="myForm">
        <div formGroupName="mdNames">
            <div formArrayName="details_array">
                <ion-list *ngFor="let obj of myForm.controls.mdNames.controls.details_array.controls; let i=index;">
                    <div [formGroupName]="i">
                        <ion-item no-lines>
                            <button ion-button color="dark" clear icon-only item-end class="deleteBtn" (click)="deleteOrgItemClicked(i)">
                                                <ion-icon name="ios-trash"></ion-icon>
                                            </button>

                            <ion-input formControlName="mdTextBox" type="text" class="textFields" placeholder="Type details"></ion-input>

                        </ion-item>
                    </div>
                </ion-list> 
            </div>
        </div>
        <ion-item>
            <button (click)="addClicked()" class="addBtn">
                Add documents
            </button>
        </ion-item>

    </form>
</ion-content>

TS：

details_array: FormArray;

  myForm: FormGroup;

  constructor(public navCtrl: NavController, private _fb: FormBuilder) {
    this.myForm = this._fb.group({
      md: false,
      mdNames: this._fb.group(
        {
          uid: "",
          _rev: "",
          type: "i_org_docs_ref",
          name: "MARINE1",
          details: "Material declaration",
          details_array: this._fb.array([this.createArray()]),
          cdt: ""
        }
      ),
    });

  }
  createArray(): FormGroup {
    return this._fb.group({
      name: 'myName',
      data: 'myData',
      mdTextBox: 'mdTextBox'
    })
  }