Navigate to particular component only after filling required input fields
I have components called demo, demo component have 3 input fields and an button.Like this:
After clicking button(i,e submit) i am navigating to another component called home.This scenario is working fine for me, But i have added some validation for first/last-name and email.
If the user enters all the required input fields then only it as to navigate to another component (i,e home).But it is navigating without entering/validating the required input fields.
While surfing i got some examples:
1) Example 1
2) Example 2
But these are for template-driven forms. I am using reactive forms.
Here is the Stakcblitz DEMO.
angular angular-material angular6 angular-forms
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
add a comment |
I have components called demo, demo component have 3 input fields and an button.Like this:
After clicking button(i,e submit) i am navigating to another component called home.This scenario is working fine for me, But i have added some validation for first/last-name and email.
If the user enters all the required input fields then only it as to navigate to another component (i,e home).But it is navigating without entering/validating the required input fields.
While surfing i got some examples:
1) Example 1
2) Example 2
But these are for template-driven forms. I am using reactive forms.
Here is the Stakcblitz DEMO.
angular angular-material angular6 angular-forms
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button> .. should work ? i.e. you can disable the Submit button till the form is valid.
– Gourishankar
Nov 26 '18 at 11:27
add a comment |
I have components called demo, demo component have 3 input fields and an button.Like this:
After clicking button(i,e submit) i am navigating to another component called home.This scenario is working fine for me, But i have added some validation for first/last-name and email.
If the user enters all the required input fields then only it as to navigate to another component (i,e home).But it is navigating without entering/validating the required input fields.
While surfing i got some examples:
1) Example 1
2) Example 2
But these are for template-driven forms. I am using reactive forms.
Here is the Stakcblitz DEMO.
angular angular-material angular6 angular-forms
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
I have components called demo, demo component have 3 input fields and an button.Like this:
After clicking button(i,e submit) i am navigating to another component called home.This scenario is working fine for me, But i have added some validation for first/last-name and email.
If the user enters all the required input fields then only it as to navigate to another component (i,e home).But it is navigating without entering/validating the required input fields.
While surfing i got some examples:
1) Example 1
2) Example 2
But these are for template-driven forms. I am using reactive forms.
Here is the Stakcblitz DEMO.
angular angular-material angular6 angular-forms
angular angular-material angular6 angular-forms
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
asked Nov 26 '18 at 11:20
Empty_SoulEmpty_Soul
32311
32311
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button> .. should work ? i.e. you can disable the Submit button till the form is valid.
– Gourishankar
Nov 26 '18 at 11:27
add a comment |
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button> .. should work ? i.e. you can disable the Submit button till the form is valid.
– Gourishankar
Nov 26 '18 at 11:27
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button> .. should work ? i.e. you can disable the Submit button till the form is valid.
– Gourishankar
Nov 26 '18 at 11:27
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button> .. should work ? i.e. you can disable the Submit button till the form is valid.
– Gourishankar
Nov 26 '18 at 11:27
add a comment |
3 Answers
3
active
oldest
votes
make the button disabled since the form is valid
<button mat-raised-button type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
and navigate in the click function
onaddCustomer(){
this.router.navigate(['/home']);
}
with out using [disabled]
check whether form valid or not in your click function
<button mat-raised-button type="submit" color="primary" (click)="onaddCustomer()">Submit</button>
and in click function
onaddCustomer(){
if(this.addForm.valid){
this.router.navigate(['/home']);
}
}
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
Simply disable the submit button till the form is valid, no other change is required.
Like that [disabled]="!addForm.valid"i.e. in your case:-
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
OR
If you don't want to disable the button then remove [routerLink]="['../home']" from the button and in the component method add a condition for validation like:-
onaddCustomer(){
if (this.addForm.invalid) { return; }
this.router.navigate(['/home']);
}
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
Disabling just submit button may cause problems if you hit enter in an input as it submits the form. If you structured your form properly (as a reactive form), you could use a function on form submit.
<form [formGroup]="yourReactiveFormGroup" (ngSubmit)="onSubmit()">
...
</form>
and in onSubmit() function:
onSubmit() {
// Stop if invalid
if (this.yourReactiveFormGroup.invalid) {
return;
}
this.router.navigate(['/your-route']);
}
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480015%2fnavigate-to-particular-component-only-after-filling-required-input-fields%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
make the button disabled since the form is valid
<button mat-raised-button type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
and navigate in the click function
onaddCustomer(){
this.router.navigate(['/home']);
}
with out using [disabled]
check whether form valid or not in your click function
<button mat-raised-button type="submit" color="primary" (click)="onaddCustomer()">Submit</button>
and in click function
onaddCustomer(){
if(this.addForm.valid){
this.router.navigate(['/home']);
}
}
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
make the button disabled since the form is valid
<button mat-raised-button type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
and navigate in the click function
onaddCustomer(){
this.router.navigate(['/home']);
}
with out using [disabled]
check whether form valid or not in your click function
<button mat-raised-button type="submit" color="primary" (click)="onaddCustomer()">Submit</button>
and in click function
onaddCustomer(){
if(this.addForm.valid){
this.router.navigate(['/home']);
}
}
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
make the button disabled since the form is valid
<button mat-raised-button type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
and navigate in the click function
onaddCustomer(){
this.router.navigate(['/home']);
}
with out using [disabled]
check whether form valid or not in your click function
<button mat-raised-button type="submit" color="primary" (click)="onaddCustomer()">Submit</button>
and in click function
onaddCustomer(){
if(this.addForm.valid){
this.router.navigate(['/home']);
}
}
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
make the button disabled since the form is valid
<button mat-raised-button type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
and navigate in the click function
onaddCustomer(){
this.router.navigate(['/home']);
}
with out using [disabled]
check whether form valid or not in your click function
<button mat-raised-button type="submit" color="primary" (click)="onaddCustomer()">Submit</button>
and in click function
onaddCustomer(){
if(this.addForm.valid){
this.router.navigate(['/home']);
}
}
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
edited Nov 26 '18 at 11:48
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
answered Nov 26 '18 at 11:30
Arun KumareshArun Kumaresh
4,22542133
4,22542133
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:39
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
check the updated answer
– Arun Kumaresh
Nov 26 '18 at 11:48
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Now it's navigating to home (component) without entering any input fields.
– Empty_Soul
Nov 27 '18 at 3:49
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Should i need to do any imports??
– Empty_Soul
Nov 27 '18 at 3:51
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
Simply disable the submit button till the form is valid, no other change is required.
Like that [disabled]="!addForm.valid"i.e. in your case:-
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
OR
If you don't want to disable the button then remove [routerLink]="['../home']" from the button and in the component method add a condition for validation like:-
onaddCustomer(){
if (this.addForm.invalid) { return; }
this.router.navigate(['/home']);
}
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
Simply disable the submit button till the form is valid, no other change is required.
Like that [disabled]="!addForm.valid"i.e. in your case:-
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
OR
If you don't want to disable the button then remove [routerLink]="['../home']" from the button and in the component method add a condition for validation like:-
onaddCustomer(){
if (this.addForm.invalid) { return; }
this.router.navigate(['/home']);
}
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
Simply disable the submit button till the form is valid, no other change is required.
Like that [disabled]="!addForm.valid"i.e. in your case:-
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
OR
If you don't want to disable the button then remove [routerLink]="['../home']" from the button and in the component method add a condition for validation like:-
onaddCustomer(){
if (this.addForm.invalid) { return; }
this.router.navigate(['/home']);
}
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
Simply disable the submit button till the form is valid, no other change is required.
Like that [disabled]="!addForm.valid"i.e. in your case:-
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>
OR
If you don't want to disable the button then remove [routerLink]="['../home']" from the button and in the component method add a condition for validation like:-
onaddCustomer(){
if (this.addForm.invalid) { return; }
this.router.navigate(['/home']);
}
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
edited Nov 26 '18 at 11:52
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
answered Nov 26 '18 at 11:32
GourishankarGourishankar
3461313
3461313
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
your answer is working fine, but the button is in disabled state i want it to enabled state only( means color="primary").
– Empty_Soul
Nov 26 '18 at 11:38
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
Then just remove the [routerLink]="['../home']" from button and write it on component like:- onaddCustomer(){ // Stop if invalid if (this.addForm.invalid) { return; } this.router.navigate(['/home']); }
– Gourishankar
Nov 26 '18 at 11:40
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
See the edit in the answer.
– Gourishankar
Nov 26 '18 at 11:47
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
Getting this warning: (Proepert 'router' doesn't exist on type 'DemoComponent' any.)
– Empty_Soul
Nov 27 '18 at 3:54
add a comment |
Disabling just submit button may cause problems if you hit enter in an input as it submits the form. If you structured your form properly (as a reactive form), you could use a function on form submit.
<form [formGroup]="yourReactiveFormGroup" (ngSubmit)="onSubmit()">
...
</form>
and in onSubmit() function:
onSubmit() {
// Stop if invalid
if (this.yourReactiveFormGroup.invalid) {
return;
}
this.router.navigate(['/your-route']);
}
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
add a comment |
Disabling just submit button may cause problems if you hit enter in an input as it submits the form. If you structured your form properly (as a reactive form), you could use a function on form submit.
<form [formGroup]="yourReactiveFormGroup" (ngSubmit)="onSubmit()">
...
</form>
and in onSubmit() function:
onSubmit() {
// Stop if invalid
if (this.yourReactiveFormGroup.invalid) {
return;
}
this.router.navigate(['/your-route']);
}
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
add a comment |
Disabling just submit button may cause problems if you hit enter in an input as it submits the form. If you structured your form properly (as a reactive form), you could use a function on form submit.
<form [formGroup]="yourReactiveFormGroup" (ngSubmit)="onSubmit()">
...
</form>
and in onSubmit() function:
onSubmit() {
// Stop if invalid
if (this.yourReactiveFormGroup.invalid) {
return;
}
this.router.navigate(['/your-route']);
}
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
Disabling just submit button may cause problems if you hit enter in an input as it submits the form. If you structured your form properly (as a reactive form), you could use a function on form submit.
<form [formGroup]="yourReactiveFormGroup" (ngSubmit)="onSubmit()">
...
</form>
and in onSubmit() function:
onSubmit() {
// Stop if invalid
if (this.yourReactiveFormGroup.invalid) {
return;
}
this.router.navigate(['/your-route']);
}
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
edited Nov 26 '18 at 11:42
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
answered Nov 26 '18 at 11:36
Harun YılmazHarun Yılmaz
874717
874717
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480015%2fnavigate-to-particular-component-only-after-filling-required-input-fields%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button> .. should work ? i.e. you can disable the Submit button till the form is valid.
– Gourishankar
Nov 26 '18 at 11:27