Angular 6 Simple way to bind multiple texbox values to dropdown options
I have a simple data entry form like where you enter the name of upto 5 siblings
html looks like this:
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling1UnderFiveName" >
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling2UnderFiveName" >
In a different tab, I have a dropdown where a user can select if any of the siblings entered in the above textboxes are also receiving special care or have allergies.
Code for dropdowns is like this
How can I get the options of the dropdowns to be dynamically populated with the values entered in the 5 text boxes ?
<select *ngIf="ChildInfo" [(ngModel)]="ChildInfo.child1PhysicalMedicalCondition" id="child1PhMedCon" >
<option></option>
</select>
My component.ts file is like this
ngOnInit() {
if (childId > 0){
this.data.getChildInfo(childId).subscribe(
(data: ChildInfo) => {
this.ChildInfo = data;
this.isLoadingResults = false; },
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
}
);
} else {
this.isLoadingResults = false;
this.ChildInfo = new ChildInfo;
}
},
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
});
}
What I am asking is, if someone enters Names in the first 5 text boxes, I would like them to be immediately added to the dropdown options in second tab.
Thanks in advance
angular
asked Nov 11 at 20:16
w2olves
64731031
add a comment |
I have a simple data entry form like where you enter the name of upto 5 siblings
html looks like this:
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling1UnderFiveName" >
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling2UnderFiveName" >
In a different tab, I have a dropdown where a user can select if any of the siblings entered in the above textboxes are also receiving special care or have allergies.
Code for dropdowns is like this
How can I get the options of the dropdowns to be dynamically populated with the values entered in the 5 text boxes ?
<select *ngIf="ChildInfo" [(ngModel)]="ChildInfo.child1PhysicalMedicalCondition" id="child1PhMedCon" >
<option></option>
</select>
My component.ts file is like this
ngOnInit() {
if (childId > 0){
this.data.getChildInfo(childId).subscribe(
(data: ChildInfo) => {
this.ChildInfo = data;
this.isLoadingResults = false; },
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
}
);
} else {
this.isLoadingResults = false;
this.ChildInfo = new ChildInfo;
}
},
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
});
}
What I am asking is, if someone enters Names in the first 5 text boxes, I would like them to be immediately added to the dropdown options in second tab.
Thanks in advance
angular
asked Nov 11 at 20:16
w2olves
64731031
Can you not just set thengModelon them, as you have done on the original 5 textboxes?
– user184994
Nov 11 at 20:22
@user184994 they bind to different ngModel.
– w2olves
Nov 11 at 20:34
Okay, then set thengModelof the 5 textboxes to the value you want them to display
– user184994
Nov 11 at 20:36
Share more code how you are storing the ChildInfo information in the first screen.
– Sunil Singh
Nov 11 at 20:54
add a comment |
I have a simple data entry form like where you enter the name of upto 5 siblings
html looks like this:
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling1UnderFiveName" >
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling2UnderFiveName" >
In a different tab, I have a dropdown where a user can select if any of the siblings entered in the above textboxes are also receiving special care or have allergies.
Code for dropdowns is like this
How can I get the options of the dropdowns to be dynamically populated with the values entered in the 5 text boxes ?
<select *ngIf="ChildInfo" [(ngModel)]="ChildInfo.child1PhysicalMedicalCondition" id="child1PhMedCon" >
<option></option>
</select>
My component.ts file is like this
ngOnInit() {
if (childId > 0){
this.data.getChildInfo(childId).subscribe(
(data: ChildInfo) => {
this.ChildInfo = data;
this.isLoadingResults = false; },
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
}
);
} else {
this.isLoadingResults = false;
this.ChildInfo = new ChildInfo;
}
},
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
});
}
What I am asking is, if someone enters Names in the first 5 text boxes, I would like them to be immediately added to the dropdown options in second tab.
Thanks in advance
angular
asked Nov 11 at 20:16
w2olves
64731031
I have a simple data entry form like where you enter the name of upto 5 siblings
html looks like this:
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling1UnderFiveName" >
<input type="text" *ngIf="ChildInfo" [(ngModel)]="ChildInfo.sibling2UnderFiveName" >
In a different tab, I have a dropdown where a user can select if any of the siblings entered in the above textboxes are also receiving special care or have allergies.
Code for dropdowns is like this
How can I get the options of the dropdowns to be dynamically populated with the values entered in the 5 text boxes ?
<select *ngIf="ChildInfo" [(ngModel)]="ChildInfo.child1PhysicalMedicalCondition" id="child1PhMedCon" >
<option></option>
</select>
My component.ts file is like this
ngOnInit() {
if (childId > 0){
this.data.getChildInfo(childId).subscribe(
(data: ChildInfo) => {
this.ChildInfo = data;
this.isLoadingResults = false; },
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
}
);
} else {
this.isLoadingResults = false;
this.ChildInfo = new ChildInfo;
}
},
(error) => {
return this.loadingMessage = 'There has been an error -' + error.message;
});
}
What I am asking is, if someone enters Names in the first 5 text boxes, I would like them to be immediately added to the dropdown options in second tab.
Thanks in advance
angular
angular
asked Nov 11 at 20:16
w2olves
64731031
asked Nov 11 at 20:16
w2olves
64731031
edited Nov 11 at 20:39
asked Nov 11 at 20:16
w2olves
64731031
asked Nov 11 at 20:16
w2olves
64731031
asked Nov 11 at 20:16
w2olves
64731031
64731031
Can you not just set thengModelon them, as you have done on the original 5 textboxes?
– user184994
Nov 11 at 20:22
@user184994 they bind to different ngModel.
– w2olves
Nov 11 at 20:34
Okay, then set thengModelof the 5 textboxes to the value you want them to display
– user184994
Nov 11 at 20:36
Share more code how you are storing the ChildInfo information in the first screen.
– Sunil Singh
Nov 11 at 20:54
add a comment |
Can you not just set thengModelon them, as you have done on the original 5 textboxes?
– user184994
Nov 11 at 20:22
@user184994 they bind to different ngModel.
– w2olves
Nov 11 at 20:34
Okay, then set thengModelof the 5 textboxes to the value you want them to display
– user184994
Nov 11 at 20:36
Share more code how you are storing the ChildInfo information in the first screen.
– Sunil Singh
Nov 11 at 20:54
Can you not just set the
ngModel on them, as you have done on the original 5 textboxes?– user184994
Nov 11 at 20:22
Can you not just set the
ngModel on them, as you have done on the original 5 textboxes?– user184994
Nov 11 at 20:22
@user184994 they bind to different ngModel.
– w2olves
Nov 11 at 20:34
@user184994 they bind to different ngModel.
– w2olves
Nov 11 at 20:34
Okay, then set the
ngModel of the 5 textboxes to the value you want them to display– user184994
Nov 11 at 20:36
Okay, then set the
ngModel of the 5 textboxes to the value you want them to display– user184994
Nov 11 at 20:36
Share more code how you are storing the ChildInfo information in the first screen.
– Sunil Singh
Nov 11 at 20:54
Share more code how you are storing the ChildInfo information in the first screen.
– Sunil Singh
Nov 11 at 20:54
add a comment |
active
oldest
votes
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%2f53252814%2fangular-6-simple-way-to-bind-multiple-texbox-values-to-dropdown-options%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53252814%2fangular-6-simple-way-to-bind-multiple-texbox-values-to-dropdown-options%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
Can you not just set the
ngModelon them, as you have done on the original 5 textboxes?– user184994
Nov 11 at 20:22
@user184994 they bind to different ngModel.
– w2olves
Nov 11 at 20:34
Okay, then set the
ngModelof the 5 textboxes to the value you want them to display– user184994
Nov 11 at 20:36
Share more code how you are storing the ChildInfo information in the first screen.
– Sunil Singh
Nov 11 at 20:54