Is it possible to refer to this form in template HTML in Angular 2?

Question

I have a button as below.

<button type="button" class="button-next btn btn-primary" nextStep>Next
  <i class="icon-arrow-right14 position-right"></i>
</button>

It is under a nested Form Group with a formGroupName="company" . I want to disable the click event of the button if company is invalid. Also, I want to set dirty for all the fields in the formGroupName="company" so that validators will be triggered and error messages will be shown.

I can do this in (click) event of the button but I'm trying to find a best way to do this such as function taking this formGroupName as input and doing the operations instead of me explicitly passing the formGroupName . I have multiple formGroupName in the page.

I don't want to use disabled property of the button as I want to trigger validations on click of the button.

What is the best way to do as needed above ?

Answer 1

In component set a flag of type boolean.

export class ComponentName{
    showHideFlag:boolean;

}

If company is invalid set flag to false else set it to true. In HTML of button use ngIf to show or hide this button as per requirement

 <button type="button" *ngIf="showHideFlag" class="button-next btn btn-primary" nextStep>Next
  <i class="icon-arrow-right14 position-right"></i>
 </button>