带有 ng-content -> form.valid/dirty 等的 Angular 表单不起作用

Posted 2023-03-13

【中文标题】带有 ng-content -> form.valid/dirty 等的 Angular 表单不起作用

【英文标题】：Angular Form with ng-content -> form.valid/dirty etc not working

【发布时间】：2020-04-08 04:17:51

【问题描述】：

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

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

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

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

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

这个问题/问题已在 *** 上被问过几次， 见https://***.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 次​​p>

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

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

【参考方案1】：

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

@Input myForm: FormGroup;

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