Angular Form with ng-content -> form.valid/dirty 等不工作

Question

我想创建一个可重用的表单组件，像这样使用:

<my-form>
   <input [ngModel]="value" (ngModelChange)="onChange($event)"/>
</my-form>

<my-form>组件看起来像:

<form>
  <ng-content></ng-content>
</form>

然而 my-form 中的表格组件看不到注入(inject)任何元素，因此如果表单中的元素发生变化，则 form.valid/dirty 等不会更新

这个问题/问题已经在 stackoverflow 上被问过几次了，见https://stackoverflow.com/questions/40843307/q-how-to-use-angular-2-template-form-with-ng-content

解决方案是手动向表单添加元素，如:

 public ngAfterViewInit(): void {
    let ngContentModels = this.models.toArray();
    ngContentModels.forEach((model) => {
    this.form.addControl(model);
});

使用此解决方法，表单可以正确更新有效/脏等属性，但是，注入(inject)元素的每次更改都会导致触发 ngModelChange事件两次。在我的示例中，方法 onChange($event)每次更改都会调用 2 次

<input [ngModel]="value" (ngModelChange)="onChange($event)"/>

您知道如何“修复”手动添加元素的解决方法吗？或者有没有其他方法如何处理 <ng-content> 的表单？注入(inject)元素？

Answer 1

当你想让你的组件(my-form)知道外部形式时，你应该考虑将它添加为输入并传递给它:

@Input myForm: FormGroup;

<form [formGroup]="myForm">
  <ng-content></ng-content>
</form>