We have an Angular 4 app, where we have a template driven form, which consists of multiple custom ponents (i.e. our custom-input tag). Within those custom ponents we need to know if the form is already submitted or not. So we can show some error text, within the ponent. So this logic from our custom ponent 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 ponents (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 ponent. Imagine the form has 50 fields..

Is there any other option?

We have an Angular 4 app, where we have a template driven form, which consists of multiple custom ponents (i.e. our custom-input tag). Within those custom ponents we need to know if the form is already submitted or not. So we can show some error text, within the ponent. So this logic from our custom ponent 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 ponents (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 ponent. Imagine the form has 50 fields..

Is there any other option?

• javascript
• angular

• 1 whoever voted this question to close, should really leave this munity.. – akcasoy Commented Feb 8, 2018 at 17:09
• 2 submitted property does not exist in reactive forms, only in the NgForm directive. – AVJT82 Commented Feb 8, 2018 at 17:12
• See github./angular/angular/issues/12300#issuement-254260930 – runderworld Commented Nov 1, 2019 at 19:33

1 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