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?
Share Improve this question edited Feb 8, 2018 at 17:11 akcasoy asked Feb 8, 2018 at 17:01 akcasoyakcasoy 7,22515 gold badges66 silver badges110 bronze badges 3- 1 whoever voted this question to close, should really leave this munity.. – akcasoy Commented Feb 8, 2018 at 17:09
-
2
submittedproperty does not exist in reactive forms, only in theNgFormdirective. – 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
Reset to default 6There 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