1

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

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

(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 个表单）但“邮件”未显示在 .

有人能告诉我我在哪里失踪吗？

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

更新：

之前去过的地方问：

  1. STACKOVERFLOW - Angular 2 Form“找不到带有路径的控件”</a>
  2. STACKOVERFLOW - Angular 2 表单“找不到控制”</a>
  3. STACKOVERFLOW -找不到带有路径的控件：angular2
  4. STACKOVERFLOW - Angular 2 使用 FormBuilder 访问嵌套的 FormArrays

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

  1. 如何在 Angular 2 中构建嵌套的模型驱动表单
  2. Angular2：构建嵌套的反应形式
4

1 回答 1

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>

现场 plunker 示例

于 2017-07-24T11:02:16.837 回答