3

我想创建一个可重用的表单组件，如下所示：

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

该<my-form>组件如下所示：

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

但是，my-form组件中的表单看不到任何注入的元素，因此如果表单中的元素发生变化，则 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);
});

}

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

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

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

4

1 回答 1

0

当您希望您的组件 ( my-form) 了解外部形式时，您应该考虑将其作为输入添加并传递：

@Input myForm: FormGroup;

<form [formGroup]="myForm">
  <ng-content></ng-content>
</form>
于 2019-12-15T13:32:47.470 回答