Question

我试图根据传递数据生成输入。每个输入都是它们自己的组件，以便稍后进行更多的修改/功能。

然后有一个表单处理器，其中包含一个单击的按钮，可以处理表单的内容。

我遇到的问题是当我点击一个按钮来处理它时我得到了表单，但是所有值都是空的，我看不到表单中的任何内容，甚至使它看起来像是被识别出来的投入在那里。

根表格：

<form #inputForm="ngForm">
  <div *ngFor="let d of data">
    <app-input [name]="d.name" [label]="d.label"></app-input>
  </div>
</form>
<app-form-processor [inputForm]="inputForm"></app-form-processor>

输入类：

<label>{{label}}</label>
<div>
  <input [(ngModel)]="name" [name]="name">
</div>

表格处理器：

<button (click)="processForm()">Process</button>

表格处理器（部分代码）：

@Input() inputForm: NgForm;

generateStatement() {
  console.log(this.inputForm);
}

控制台日志只有一个没有任何值的ngForm（除了ngForm的默认值之外的其他任何东西）

请注意，如果我将输入类的内容直接粘贴到ngForm中（而不是使用子组件），它可以正常工作，但我想尽可能使用子组件。 < / p>

Answer 1

根据Antoniossss的建议，我查了一下ControlValueAccessor，发现这个教程让我得到了一些工作。

https://medium.com/@tarik.nzl/angular-2-custom-form-control-with-validation-json-input-2b4cf9bc2d73

从子组件向表单添加输入

1 个答案: