How to know if an Angular (v5) Reactive-Form is submitted from a form field which itself is a custom component?

Question

We have an Angular 4 app, where we have a template driven form, which consists of multiple custom components (i.e. our custom-input tag). Within those custom components we need to know if the form is already submitted or not. So we can show some error text, within the component. So this logic from our custom component has been working until now with Angular 4 and Template Driven Forms:

const classes = this.elementRef.nativeElement.className;

And classes have for instance ng-dirty, ng-touched, ng-invalid and submitted (when the form is submitted). So angular was adding the class 'submitted' automatically for every form field, when the form is submitted.

Now We try to build another Angular app, with Version 5, with reactive forms. We have the same concept, but from the components (actually from the html - since we use nativeElement) we somehow do not get any clue about the submit. We can of course give in the information from the form to custom elements, but we dont want to write the same on every form component. Imagine the form has 50 fields..

Is there any other option?

Answer 1

There is no such property which can tell you the form is submitted or not, you need to create a variable and keep status of your form like

isSubmitted: boolean = false;

On save method

save(...){
   this.isSubmitted = true;
   ...............
}

See the below link for more detail

angular 5 form validation easiest way