Question

我是angular2的新手，我试图动态添加表单字段并恢复所有用户信息。

我有这个组件（我尝试重复使用）

import {Component, Input, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'text-form',
  templateUrl: './text.component.html'
})
export class TextComponent implements OnInit{
  textForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.textForm = this.formBuilder.group({
      value: ['', Validators.required],
    });
  }

  submitForm(): void {
    console.log(JSON.stringify(this.textForm.getRawValue()));
  }

}

我接下来的html（about.component.html）

<p><a class="btn btn-primary" role="button" (click)="addField(1)">Add text!</a></p>
<p *ngFor="let type of forms">
  <text-form></text-form>
</p>

和此页面的关联ts html（about.component.ts）

export class AboutComponent {  
  forms: number[]=[];

  constructor() {}

   addField(type:number): void {
     this.forms.push(type);
  }

}

当我按下按钮时，我的html中有一个新表格很好。但我不知道如何迭代我的所有text-form以获取内容。

我还尝试直接对TextComponent进行实例化，然后对其进行迭代，但它没有按预期工作。

about.component.ts

   addField(type:number): void {

     let tmp = new TextComponent(new FormBuilder());
     this.forms.push(tmp);
}

但是当我尝试显示我刚刚收到的内容时 [object Object]

我也尝试过使用此代码：http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview 我理解setter部分，但我真的不知道如何实现新组件（来自工厂或直接）

感谢您的帮助

动态组件列表

0 个答案: