How to validate user inputs which comes both from parent component and child component before submitting data...
I have a parent component "Parent" and a child component "Child" which is called in the parent component on click of an anchor tag through router link.
there are two user inputs in the parent component and two user inputs in child component. A save button is included in the parent component. How can I validate if the user has entered data in both the parent and child component so that I can validate and save the user inputs?
Parent Component Template:
<img src="save.png"(click)="validateandsave(model)">
<input type="text" name="code" [(ngModel)]="model.code">
<input type="text" name="name" [(ngModel)]="model.name">
<a routerLink="PC">
<div (click)="showsettings()"> </div>
<router-outlet><router-outlet>
ParentComponent ts file:
showsettings()
{
this.router.navigate(['PC'], { relativeTo: this.route });
}
validateandsave()
{
/*how to implement since i have inputs in child component as well*/
}
Child component template:
<input type="text" name="phonenumber" [(ngModel)]="phonenumber">
<input type="text" name="address" [(ngModel)]="address">
How can I validate if the user has entered data in all four inputs(from parent and child)?so that I can save the data
app-routing.module.ts file:
const routes: Routes = [{
path: 'enter',
component: ParentComponent,
children: [
{
path: 'PC',
component: ChildComponent
}
]
}
];
angular typescript
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
|
show 2 more comments
I have a parent component "Parent" and a child component "Child" which is called in the parent component on click of an anchor tag through router link.
there are two user inputs in the parent component and two user inputs in child component. A save button is included in the parent component. How can I validate if the user has entered data in both the parent and child component so that I can validate and save the user inputs?
Parent Component Template:
<img src="save.png"(click)="validateandsave(model)">
<input type="text" name="code" [(ngModel)]="model.code">
<input type="text" name="name" [(ngModel)]="model.name">
<a routerLink="PC">
<div (click)="showsettings()"> </div>
<router-outlet><router-outlet>
ParentComponent ts file:
showsettings()
{
this.router.navigate(['PC'], { relativeTo: this.route });
}
validateandsave()
{
/*how to implement since i have inputs in child component as well*/
}
Child component template:
<input type="text" name="phonenumber" [(ngModel)]="phonenumber">
<input type="text" name="address" [(ngModel)]="address">
How can I validate if the user has entered data in all four inputs(from parent and child)?so that I can save the data
app-routing.module.ts file:
const routes: Routes = [{
path: 'enter',
component: ParentComponent,
children: [
{
path: 'PC',
component: ChildComponent
}
]
}
];
angular typescript
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
1
can you share your code
– Chellappan
Jan 20 at 3:58
hey, is this enough?
– Gp_1993
Jan 20 at 4:31
1
Code snippet doesn't match based on your question, where is thechild componentin yourparent component?
– penleychan
Jan 20 at 4:41
hey is it fine now? Sorry, I didnt upload app.routing module earlier
– Gp_1993
Jan 20 at 4:53
child form fields only show when you go to that page right?
– Chellappan
Jan 20 at 4:54
|
show 2 more comments
I have a parent component "Parent" and a child component "Child" which is called in the parent component on click of an anchor tag through router link.
there are two user inputs in the parent component and two user inputs in child component. A save button is included in the parent component. How can I validate if the user has entered data in both the parent and child component so that I can validate and save the user inputs?
Parent Component Template:
<img src="save.png"(click)="validateandsave(model)">
<input type="text" name="code" [(ngModel)]="model.code">
<input type="text" name="name" [(ngModel)]="model.name">
<a routerLink="PC">
<div (click)="showsettings()"> </div>
<router-outlet><router-outlet>
ParentComponent ts file:
showsettings()
{
this.router.navigate(['PC'], { relativeTo: this.route });
}
validateandsave()
{
/*how to implement since i have inputs in child component as well*/
}
Child component template:
<input type="text" name="phonenumber" [(ngModel)]="phonenumber">
<input type="text" name="address" [(ngModel)]="address">
How can I validate if the user has entered data in all four inputs(from parent and child)?so that I can save the data
app-routing.module.ts file:
const routes: Routes = [{
path: 'enter',
component: ParentComponent,
children: [
{
path: 'PC',
component: ChildComponent
}
]
}
];
angular typescript
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
I have a parent component "Parent" and a child component "Child" which is called in the parent component on click of an anchor tag through router link.
there are two user inputs in the parent component and two user inputs in child component. A save button is included in the parent component. How can I validate if the user has entered data in both the parent and child component so that I can validate and save the user inputs?
Parent Component Template:
<img src="save.png"(click)="validateandsave(model)">
<input type="text" name="code" [(ngModel)]="model.code">
<input type="text" name="name" [(ngModel)]="model.name">
<a routerLink="PC">
<div (click)="showsettings()"> </div>
<router-outlet><router-outlet>
ParentComponent ts file:
showsettings()
{
this.router.navigate(['PC'], { relativeTo: this.route });
}
validateandsave()
{
/*how to implement since i have inputs in child component as well*/
}
Child component template:
<input type="text" name="phonenumber" [(ngModel)]="phonenumber">
<input type="text" name="address" [(ngModel)]="address">
How can I validate if the user has entered data in all four inputs(from parent and child)?so that I can save the data
app-routing.module.ts file:
const routes: Routes = [{
path: 'enter',
component: ParentComponent,
children: [
{
path: 'PC',
component: ChildComponent
}
]
}
];
angular typescript
angular typescript
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
edited Jan 20 at 4:55
Gp_1993
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
asked Jan 20 at 3:51
Gp_1993Gp_1993
599
599
1
can you share your code
– Chellappan
Jan 20 at 3:58
hey, is this enough?
– Gp_1993
Jan 20 at 4:31
1
Code snippet doesn't match based on your question, where is thechild componentin yourparent component?
– penleychan
Jan 20 at 4:41
hey is it fine now? Sorry, I didnt upload app.routing module earlier
– Gp_1993
Jan 20 at 4:53
child form fields only show when you go to that page right?
– Chellappan
Jan 20 at 4:54
|
show 2 more comments
1
can you share your code
– Chellappan
Jan 20 at 3:58
hey, is this enough?
– Gp_1993
Jan 20 at 4:31
1
Code snippet doesn't match based on your question, where is thechild componentin yourparent component?
– penleychan
Jan 20 at 4:41
hey is it fine now? Sorry, I didnt upload app.routing module earlier
– Gp_1993
Jan 20 at 4:53
child form fields only show when you go to that page right?
– Chellappan
Jan 20 at 4:54
1
1
can you share your code
– Chellappan
Jan 20 at 3:58
can you share your code
– Chellappan
Jan 20 at 3:58
hey, is this enough?
– Gp_1993
Jan 20 at 4:31
hey, is this enough?
– Gp_1993
Jan 20 at 4:31
1
1
Code snippet doesn't match based on your question, where is the
child component in your parent component?– penleychan
Jan 20 at 4:41
Code snippet doesn't match based on your question, where is the
child component in your parent component?– penleychan
Jan 20 at 4:41
hey is it fine now? Sorry, I didnt upload app.routing module earlier
– Gp_1993
Jan 20 at 4:53
hey is it fine now? Sorry, I didnt upload app.routing module earlier
– Gp_1993
Jan 20 at 4:53
child form fields only show when you go to that page right?
– Chellappan
Jan 20 at 4:54
child form fields only show when you go to that page right?
– Chellappan
Jan 20 at 4:54
|
show 2 more comments
1 Answer
1
active
oldest
votes
you can register your child form field with parent form using controlcontainer. First you should wrap you router-outlet inside your form tag.
<form #f="ngForm">
Email:<input type="text" ngModel name="email">
<br>
Name:<input type="text" ngModel name="name">
<a routerLink='pc'>Next</a>
<router-outlet></router-outlet>
</form>
Then Use viewproviders to provide control container and use existing form.
import { Component, OnInit } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-pc',
templateUrl: './pc.component.html',
styleUrls: ['./pc.component.css'],
viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class PcComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Example:https://stackblitz.com/edit/angular-9z52wq
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
1
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
|
show 6 more comments
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%2f54273429%2fhow-to-validate-user-inputs-which-comes-both-from-parent-component-and-child-com%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
you can register your child form field with parent form using controlcontainer. First you should wrap you router-outlet inside your form tag.
<form #f="ngForm">
Email:<input type="text" ngModel name="email">
<br>
Name:<input type="text" ngModel name="name">
<a routerLink='pc'>Next</a>
<router-outlet></router-outlet>
</form>
Then Use viewproviders to provide control container and use existing form.
import { Component, OnInit } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-pc',
templateUrl: './pc.component.html',
styleUrls: ['./pc.component.css'],
viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class PcComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Example:https://stackblitz.com/edit/angular-9z52wq
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
1
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
|
show 6 more comments
you can register your child form field with parent form using controlcontainer. First you should wrap you router-outlet inside your form tag.
<form #f="ngForm">
Email:<input type="text" ngModel name="email">
<br>
Name:<input type="text" ngModel name="name">
<a routerLink='pc'>Next</a>
<router-outlet></router-outlet>
</form>
Then Use viewproviders to provide control container and use existing form.
import { Component, OnInit } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-pc',
templateUrl: './pc.component.html',
styleUrls: ['./pc.component.css'],
viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class PcComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Example:https://stackblitz.com/edit/angular-9z52wq
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
1
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
|
show 6 more comments
you can register your child form field with parent form using controlcontainer. First you should wrap you router-outlet inside your form tag.
<form #f="ngForm">
Email:<input type="text" ngModel name="email">
<br>
Name:<input type="text" ngModel name="name">
<a routerLink='pc'>Next</a>
<router-outlet></router-outlet>
</form>
Then Use viewproviders to provide control container and use existing form.
import { Component, OnInit } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-pc',
templateUrl: './pc.component.html',
styleUrls: ['./pc.component.css'],
viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class PcComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Example:https://stackblitz.com/edit/angular-9z52wq
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
you can register your child form field with parent form using controlcontainer. First you should wrap you router-outlet inside your form tag.
<form #f="ngForm">
Email:<input type="text" ngModel name="email">
<br>
Name:<input type="text" ngModel name="name">
<a routerLink='pc'>Next</a>
<router-outlet></router-outlet>
</form>
Then Use viewproviders to provide control container and use existing form.
import { Component, OnInit } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-pc',
templateUrl: './pc.component.html',
styleUrls: ['./pc.component.css'],
viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class PcComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Example:https://stackblitz.com/edit/angular-9z52wq
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
answered Jan 20 at 5:07
ChellappanChellappan
5,2392419
5,2392419
1
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
|
show 6 more comments
1
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
1
1
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Interesting. I didn't know you could do that.
– Aluan Haddad
Jan 20 at 5:11
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
Thanks a lot... but is this the only way possible??? because I cant do this...because I have other divs that shouldn't be in the form...it would mess up my ui..
– Gp_1993
Jan 20 at 5:47
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
can't you place the div outside the form?
– Chellappan
Jan 20 at 6:03
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
Hey..I was being an idiot...I could just put all divs inside the form.....Thanks a lot
– Gp_1993
Jan 20 at 6:07
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
@Chellappan Hey ...How can I do validation in this at html side??
– Gp_1993
Jan 20 at 21:10
|
show 6 more comments
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%2f54273429%2fhow-to-validate-user-inputs-which-comes-both-from-parent-component-and-child-com%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
1
can you share your code
– Chellappan
Jan 20 at 3:58
hey, is this enough?
– Gp_1993
Jan 20 at 4:31
1
Code snippet doesn't match based on your question, where is the
child componentin yourparent component?– penleychan
Jan 20 at 4:41
hey is it fine now? Sorry, I didnt upload app.routing module earlier
– Gp_1993
Jan 20 at 4:53
child form fields only show when you go to that page right?
– Chellappan
Jan 20 at 4:54