从子组件向表单添加输入

Question

我正在尝试根据传入的数据生成输入。每个输入都是它们自己的组件，以便稍后 modifications/functionality。

然后有一个表单处理器，其中包含一个按钮，单击该按钮可与表单所具有的内容一起使用。

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

根格式：

<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>

输入Class:

<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 具有的默认值之外的几乎所有其他内容）

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

Answer 1

按照 Antoniosss 的建议，我查阅了 ControlValueAccessor 并找到了这个教程，它让我开始工作。

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

从子组件向表单添加输入

Add Inputs to a Form from a Child Component

angular2-forms

angular