Angular 8 模板驱动表单 - 使用 ngTemplateOutlet 传递控件答案

【问题标题】：Angular 8 template driven form - pass controls using ngTemplateOutletAngular 8 模板驱动表单 - 使用 ngTemplateOutlet 传递控件
【发布时间】：2019-08-02 00:07:26
【问题描述】：

我知道这已经被问过很多次了。但我找不到适合我的解决方案。

我有一个模板驱动的表单，带有一个标记为必需并通过 ngTemplateOutlet 传递的控件。即使我在控件上没有值，表单也是有效的。

尝试了所有可能的

  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],

与

  viewProviders: [{
       provide: ControlContainer,
       useFactory: (container: ControlContainer) => container,
       deps: [[new SkipSelf(), ControlContainer]],
       }]

但没有运气

如果你能让这个 Stackbliz 工作，那就太棒了

https://stackblitz.com/edit/angular-xm3nf7

注意：我不能将模板放入表单中，因为有其他部分访问它。

【问题讨论】：

这个云是一个角度错误或功能，因为角度甚至没有更新表单的控件。但解决方法是使用反应形式。

标签： angular angular-forms

【解决方案1】：

我想你的表单不知道 ngTemplate 的 ngModel。一个工作是使用 ViewChildren 检查页面中的所有 NgModel 是否有效。见stackblitz

@ViewChildren(NgControl) list: QueryList<NgControl>;
  lastName: string;
  yet=false
  get invalid() {
    let invalid = false;
    if (this.list) {
      this.list.forEach(x => {
        invalid = invalid || x.invalid
      })
    }
    return invalid
  }
  ngOnInit()
  {
    setTimeout(()=>{
      this.yet=true
    })
  }

<button [disabled]="yet && invalid"  (click)="actionConfirmed()"> Confirm  </button>

注意“奇怪”是为了避免 AfterChecked 错误

【讨论】：

感谢您的宝贵时间。但我想知道是否有适当的解决方案。 IE;使表单知道其包含的控件。在我的应用程序中，我有另一个 ng-template，它从一个子组件为这个表单提供了另一个控件。
+1 用于在检查错误后更改的巧妙解决方法。但是，首先发生了什么会导致这些错误？这通常是设计错误的标志，在重新计算期间导致了更改。