Angular 5 : A component with Form inside a Modal ng-template validation

Question

I have in HTML of parent component workorders.component.html, a MODAL 'ng-template' with a child component named 'app-generic-form'.

The component named 'app-generic-form' is basically a reactive FORM. All the validation in the 'app-generic-form' is done locally.

In the parent component (workorders.component.html) I have the 'submit' and 'cancel' buttons which are part of the MODAL 'ng-template'.

How can I disable and enable the submit button on the parent component based on the child component (app-generic-form) FORM validations?

The MODAL part :

<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>

Check this blog of @Output Decorator If you find any diff to implement then just let us know! — Prashant Pimpale

Ininiv Ininiv · Accepted Answer · 2019-12-02T08:46:55

Try to use ControlValueAccessor

An example of the same scenario except the modal

Stackblitz

Angular 5 : A component with Form inside a Modal ng-template validation

1 Answers