angular2 - 数据未以嵌套形式显示

Question

首先，我已经阅读了很多关于嵌套表单的 Whosebug 的回答，但我无法解决这些问题，感谢您的宝贵时间。

我正在尝试做一个表单来编辑用户信息，我使用的信息是这样的：

(2) [Object, Object]
  0: Object
    mail: "example1@exp.exp"
  1: Object
    mail: "example2@exp.exp"

在我的组件中，我创建了一个嵌套表单：

// blablabla.component.ts

// imports, component, ...

export class EditMailsComponent implements OnInit {
  @Input() data: Array<any>;

  private form: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  )

  ngOnInit(){
    this.form = this.formBuilder.group({
      mails: this.formBuilder.array([]),
    });

    this.fnOpen();
  }

  private fnOpen()
  {
    // ...

    const control = <FormArray>this.form.controls['mails'];

    this.data.forEach(x => {
      control.push(this.populateForm(x);
    });

    // ...
  }

  private populateForm(x: Array<any>)
  {
    return this.formBuilder.group({
      mail: [x.mail]
    });
  }
}

我的 html 文件如下所示：

<!-- ... -->
<form class='smart-form' novalidate>
  <div class='modal-body'>
    <div [formGroup]='form'>
      <div formArrayName='mails'>
        <div *ngFor='let mail of form.controls.mails.controls; let i=index'>
          <div [formGroupName]="i">
            <fieldset>
              <section class='col-col-6'>
                <label class='input' id='mail'>
                  <input type='text' formControlName='mail' ngModel>
                </label>
              </section>
            </fieldset>
      <!-- ... -->

当我尝试打开页面进行编辑时，创建了正确数量的嵌套表单（例如：如果我有一个 4 对象数组，则打开了 4 个表单）但是 "mail" 没有显示在 .

谁能告诉我我哪里不见了？

如果您需要更多信息，我很乐意提供帮助。

更新：

我问过的地方：

堆栈溢出 -
堆栈溢出 - Angular 2 Form “Cannot Find Control”
堆栈溢出 - Cannot find control with path: angular2
Whosebug - Angular 2 访问嵌套的 FormArrays 使用 FormBuilder

教程（我尝试使用它们来查找代码中的错误）：

Answer 1

在结构中使用数据：

[
  {
    "mail": "example1@exp.exp"
  },
  {
    "mail": "example2@exp.exp"
  }
]

父组件

ngOnInit() {
    this.myForm = this._fb.group({
        name: ['', [Validators.required, Validators.minLength(5)]],
        mails: this._fb.array(this.mails.map(mail => this._fb.group(mail)))
    });
}

父模板

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
  <ng-container *ngFor="let mail of myForm.controls.mails.controls">
    <mail [group]="mail"></mail>
  </ng-container>
</form>

子组件

@Component({
  moduleId: module.id,
  selector: 'mail',
  templateUrl: 'mail.component.html',
})
export class MailComponent {
  @Input('group')
  public mailForm: FormGroup;
}

子模板

<div [formGroup]="mailForm">
  <div class="form-group">
    <label>mail</label>
    <input type="text" class="form-control" formControlName="mail">
  </div>
</div>

Live plunker example

angular2 - 数据未以嵌套形式显示

angular2 - data not being displayed in nested form

angular

angular-forms