Angular 5：在模态 ng-template 验证中带有 Form 的组件

Question

我在父组件workorders.component.html 的 HTML 中有一个模态“ng-template”和一个名为“app-generic-form”的子组件。

名为“app-generic-form”的组件基本上是一个响应式表单。 'app-generic-form' 中的所有验证均在本地完成。

在父组件 (workorders.component.html) 中，我有“提交”和“取消”按钮，它们是 MODAL 'ng-template' 的一部分。

如何根据子组件 (app-generic-form) FORM 验证禁用和启用父组件上的提交按钮？

模态部分：

<ng-template #component let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{modalRef.content.title}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="save('Cross click')">
        <span aria-hidden="true"></span>
      </button>
    </div>
    <div class="modal-body">
      <app-generic-form [fields]="fields" [data]="modalRef.content.data"></app-generic-form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-primary" (click)="cancel()">{{'work-order.cancel' | translate }}</button>
      <button type="button" class="btn btn-primary" (click)="submit()">{{'work-order.save' | translate }}</button>
    </div>
  </ng-template>

Answer 1

尝试使用 ControlValueAccessor

除模态外的相同场景的示例

Stackblitz