Angular “select” binding to a true/false value not working
I'm trying to bind my select element to a true/false value. The binding seems to happen as the -- select -- option isn't shown, meaning Angular knows there's a value, but the display is just blank by default. If I click on it then I see my Yes and No choices, but it's not being initially set.
<select class="form-control" id="primary" name="primary" required
[(ngModel)]="primaryValue">
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>
<option [ngValue]="true">Yes</option>
<option [ngValue]="false">No</option>
</select>
The primaryValue is defined like this in the typescript file:
@Input() primaryValue: boolean;
If I do this with just an input it works fine, but if I use primaryValue as both input and output, then it doesn't work. You can see an example on StackBlitz
angular angularjs-ng-value
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
|
show 7 more comments
I'm trying to bind my select element to a true/false value. The binding seems to happen as the -- select -- option isn't shown, meaning Angular knows there's a value, but the display is just blank by default. If I click on it then I see my Yes and No choices, but it's not being initially set.
<select class="form-control" id="primary" name="primary" required
[(ngModel)]="primaryValue">
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>
<option [ngValue]="true">Yes</option>
<option [ngValue]="false">No</option>
</select>
The primaryValue is defined like this in the typescript file:
@Input() primaryValue: boolean;
If I do this with just an input it works fine, but if I use primaryValue as both input and output, then it doesn't work. You can see an example on StackBlitz
angular angularjs-ng-value
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
It appears to work well in this stackblitz. I simulated a delayed assignment but it also works ifprimaryValueis set totruewhen declared. Is theselectelement inside of aformand, if so, does it have a unique name? MaybeprimaryValuehas the string value"true", as shown in this stackblitz.
– ConnorsFan
Nov 14 '18 at 22:04
I think you have to implement 'OnChanges' lifecycle, since the value is passed from an input decorator, therefore value from input decorator is received after the rendering has completed. The binding seems to happen as the -- select -- option isn't shown ... yes, that is happening because the @Input value is undefined (when rendering) so not option is shown at all
– Gabriel Lopez
Nov 14 '18 at 22:08
@ConnorsFan I have it working elsewhere as well, which is why I'm so confused. The value is defined as a boolean, and the webservice is definitely returning justtrueand not the string true.
– Gargoyle
Nov 14 '18 at 23:00
@Gargoyle but undefined === null is false so if primaryValue is undefined<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>wont show
– Gabriel Lopez
Nov 14 '18 at 23:10
@GabrielLopez Yes, sorry I read your initial comment wrong. Is theOnChangesdifferent from using the getter/setter pattern? Updated the question to show I'm explicitly using that now.
– Gargoyle
Nov 14 '18 at 23:14
|
show 7 more comments
I'm trying to bind my select element to a true/false value. The binding seems to happen as the -- select -- option isn't shown, meaning Angular knows there's a value, but the display is just blank by default. If I click on it then I see my Yes and No choices, but it's not being initially set.
<select class="form-control" id="primary" name="primary" required
[(ngModel)]="primaryValue">
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>
<option [ngValue]="true">Yes</option>
<option [ngValue]="false">No</option>
</select>
The primaryValue is defined like this in the typescript file:
@Input() primaryValue: boolean;
If I do this with just an input it works fine, but if I use primaryValue as both input and output, then it doesn't work. You can see an example on StackBlitz
angular angularjs-ng-value
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
I'm trying to bind my select element to a true/false value. The binding seems to happen as the -- select -- option isn't shown, meaning Angular knows there's a value, but the display is just blank by default. If I click on it then I see my Yes and No choices, but it's not being initially set.
<select class="form-control" id="primary" name="primary" required
[(ngModel)]="primaryValue">
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>
<option [ngValue]="true">Yes</option>
<option [ngValue]="false">No</option>
</select>
The primaryValue is defined like this in the typescript file:
@Input() primaryValue: boolean;
If I do this with just an input it works fine, but if I use primaryValue as both input and output, then it doesn't work. You can see an example on StackBlitz
angular angularjs-ng-value
angular angularjs-ng-value
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
edited Nov 14 '18 at 23:47
Gargoyle
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
asked Nov 14 '18 at 21:57
GargoyleGargoyle
2,82242652
2,82242652
It appears to work well in this stackblitz. I simulated a delayed assignment but it also works ifprimaryValueis set totruewhen declared. Is theselectelement inside of aformand, if so, does it have a unique name? MaybeprimaryValuehas the string value"true", as shown in this stackblitz.
– ConnorsFan
Nov 14 '18 at 22:04
I think you have to implement 'OnChanges' lifecycle, since the value is passed from an input decorator, therefore value from input decorator is received after the rendering has completed. The binding seems to happen as the -- select -- option isn't shown ... yes, that is happening because the @Input value is undefined (when rendering) so not option is shown at all
– Gabriel Lopez
Nov 14 '18 at 22:08
@ConnorsFan I have it working elsewhere as well, which is why I'm so confused. The value is defined as a boolean, and the webservice is definitely returning justtrueand not the string true.
– Gargoyle
Nov 14 '18 at 23:00
@Gargoyle but undefined === null is false so if primaryValue is undefined<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>wont show
– Gabriel Lopez
Nov 14 '18 at 23:10
@GabrielLopez Yes, sorry I read your initial comment wrong. Is theOnChangesdifferent from using the getter/setter pattern? Updated the question to show I'm explicitly using that now.
– Gargoyle
Nov 14 '18 at 23:14
|
show 7 more comments
It appears to work well in this stackblitz. I simulated a delayed assignment but it also works ifprimaryValueis set totruewhen declared. Is theselectelement inside of aformand, if so, does it have a unique name? MaybeprimaryValuehas the string value"true", as shown in this stackblitz.
– ConnorsFan
Nov 14 '18 at 22:04
I think you have to implement 'OnChanges' lifecycle, since the value is passed from an input decorator, therefore value from input decorator is received after the rendering has completed. The binding seems to happen as the -- select -- option isn't shown ... yes, that is happening because the @Input value is undefined (when rendering) so not option is shown at all
– Gabriel Lopez
Nov 14 '18 at 22:08
@ConnorsFan I have it working elsewhere as well, which is why I'm so confused. The value is defined as a boolean, and the webservice is definitely returning justtrueand not the string true.
– Gargoyle
Nov 14 '18 at 23:00
@Gargoyle but undefined === null is false so if primaryValue is undefined<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>wont show
– Gabriel Lopez
Nov 14 '18 at 23:10
@GabrielLopez Yes, sorry I read your initial comment wrong. Is theOnChangesdifferent from using the getter/setter pattern? Updated the question to show I'm explicitly using that now.
– Gargoyle
Nov 14 '18 at 23:14
It appears to work well in this stackblitz. I simulated a delayed assignment but it also works if
primaryValue is set to true when declared. Is the select element inside of a form and, if so, does it have a unique name? Maybe primaryValue has the string value "true", as shown in this stackblitz.– ConnorsFan
Nov 14 '18 at 22:04
It appears to work well in this stackblitz. I simulated a delayed assignment but it also works if
primaryValue is set to true when declared. Is the select element inside of a form and, if so, does it have a unique name? Maybe primaryValue has the string value "true", as shown in this stackblitz.– ConnorsFan
Nov 14 '18 at 22:04
I think you have to implement 'OnChanges' lifecycle, since the value is passed from an input decorator, therefore value from input decorator is received after the rendering has completed. The binding seems to happen as the -- select -- option isn't shown ... yes, that is happening because the @Input value is undefined (when rendering) so not option is shown at all
– Gabriel Lopez
Nov 14 '18 at 22:08
I think you have to implement 'OnChanges' lifecycle, since the value is passed from an input decorator, therefore value from input decorator is received after the rendering has completed. The binding seems to happen as the -- select -- option isn't shown ... yes, that is happening because the @Input value is undefined (when rendering) so not option is shown at all
– Gabriel Lopez
Nov 14 '18 at 22:08
@ConnorsFan I have it working elsewhere as well, which is why I'm so confused. The value is defined as a boolean, and the webservice is definitely returning just
true and not the string true.– Gargoyle
Nov 14 '18 at 23:00
@ConnorsFan I have it working elsewhere as well, which is why I'm so confused. The value is defined as a boolean, and the webservice is definitely returning just
true and not the string true.– Gargoyle
Nov 14 '18 at 23:00
@Gargoyle but undefined === null is false so if primaryValue is undefined
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>wont show– Gabriel Lopez
Nov 14 '18 at 23:10
@Gargoyle but undefined === null is false so if primaryValue is undefined
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>wont show– Gabriel Lopez
Nov 14 '18 at 23:10
@GabrielLopez Yes, sorry I read your initial comment wrong. Is the
OnChanges different from using the getter/setter pattern? Updated the question to show I'm explicitly using that now.– Gargoyle
Nov 14 '18 at 23:14
@GabrielLopez Yes, sorry I read your initial comment wrong. Is the
OnChanges different from using the getter/setter pattern? Updated the question to show I'm explicitly using that now.– Gargoyle
Nov 14 '18 at 23:14
|
show 7 more comments
3 Answers
3
active
oldest
votes
Two-Way binding is also called as "Banana in a box" binding i.e. [()].
Inside your AppComponent.html, reverse the order of parenthesis for correct binding
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
add a comment |
Finally tracked this down. In the component that showed the questions I had this as part of the @Component definition:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
which I had seen on the web say that it makes the child controller's components be part of the parent component's form validation. As soon as I removed that part, everything started working properly.
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
add a comment |
You must pass the boolean value to set the initial value.
<app-lab-hazard-classification-question-group
(change)="onHazardValueChanged($event)"
primaryQuestion="Primary Question One"
[primaryValue]="true" <!-- Set the boolean value -->
secondaryQuestion="Secondary Question One"
[secondaryValue]="false"> <!-- Set the boolean value -->
</app-lab-hazard-classification-question-group>
Working copy is here - https://stackblitz.com/edit/angular-5mdctu
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
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%2f53309332%2fangular-select-binding-to-a-true-false-value-not-working%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
Two-Way binding is also called as "Banana in a box" binding i.e. [()].
Inside your AppComponent.html, reverse the order of parenthesis for correct binding
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
add a comment |
Two-Way binding is also called as "Banana in a box" binding i.e. [()].
Inside your AppComponent.html, reverse the order of parenthesis for correct binding
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
add a comment |
Two-Way binding is also called as "Banana in a box" binding i.e. [()].
Inside your AppComponent.html, reverse the order of parenthesis for correct binding
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
Two-Way binding is also called as "Banana in a box" binding i.e. [()].
Inside your AppComponent.html, reverse the order of parenthesis for correct binding
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
answered Nov 15 '18 at 0:23
Shivam SinhaShivam Sinha
635
635
add a comment |
add a comment |
Finally tracked this down. In the component that showed the questions I had this as part of the @Component definition:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
which I had seen on the web say that it makes the child controller's components be part of the parent component's form validation. As soon as I removed that part, everything started working properly.
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
add a comment |
Finally tracked this down. In the component that showed the questions I had this as part of the @Component definition:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
which I had seen on the web say that it makes the child controller's components be part of the parent component's form validation. As soon as I removed that part, everything started working properly.
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
add a comment |
Finally tracked this down. In the component that showed the questions I had this as part of the @Component definition:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
which I had seen on the web say that it makes the child controller's components be part of the parent component's form validation. As soon as I removed that part, everything started working properly.
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
Finally tracked this down. In the component that showed the questions I had this as part of the @Component definition:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
which I had seen on the web say that it makes the child controller's components be part of the parent component's form validation. As soon as I removed that part, everything started working properly.
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
answered Nov 15 '18 at 0:54
GargoyleGargoyle
2,82242652
2,82242652
add a comment |
add a comment |
You must pass the boolean value to set the initial value.
<app-lab-hazard-classification-question-group
(change)="onHazardValueChanged($event)"
primaryQuestion="Primary Question One"
[primaryValue]="true" <!-- Set the boolean value -->
secondaryQuestion="Secondary Question One"
[secondaryValue]="false"> <!-- Set the boolean value -->
</app-lab-hazard-classification-question-group>
Working copy is here - https://stackblitz.com/edit/angular-5mdctu
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
add a comment |
You must pass the boolean value to set the initial value.
<app-lab-hazard-classification-question-group
(change)="onHazardValueChanged($event)"
primaryQuestion="Primary Question One"
[primaryValue]="true" <!-- Set the boolean value -->
secondaryQuestion="Secondary Question One"
[secondaryValue]="false"> <!-- Set the boolean value -->
</app-lab-hazard-classification-question-group>
Working copy is here - https://stackblitz.com/edit/angular-5mdctu
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
add a comment |
You must pass the boolean value to set the initial value.
<app-lab-hazard-classification-question-group
(change)="onHazardValueChanged($event)"
primaryQuestion="Primary Question One"
[primaryValue]="true" <!-- Set the boolean value -->
secondaryQuestion="Secondary Question One"
[secondaryValue]="false"> <!-- Set the boolean value -->
</app-lab-hazard-classification-question-group>
Working copy is here - https://stackblitz.com/edit/angular-5mdctu
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
You must pass the boolean value to set the initial value.
<app-lab-hazard-classification-question-group
(change)="onHazardValueChanged($event)"
primaryQuestion="Primary Question One"
[primaryValue]="true" <!-- Set the boolean value -->
secondaryQuestion="Secondary Question One"
[secondaryValue]="false"> <!-- Set the boolean value -->
</app-lab-hazard-classification-question-group>
Working copy is here - https://stackblitz.com/edit/angular-5mdctu
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
answered Nov 15 '18 at 7:40
Sunil SinghSunil Singh
6,3472627
6,3472627
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%2f53309332%2fangular-select-binding-to-a-true-false-value-not-working%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
It appears to work well in this stackblitz. I simulated a delayed assignment but it also works if
primaryValueis set totruewhen declared. Is theselectelement inside of aformand, if so, does it have a unique name? MaybeprimaryValuehas the string value"true", as shown in this stackblitz.– ConnorsFan
Nov 14 '18 at 22:04
I think you have to implement 'OnChanges' lifecycle, since the value is passed from an input decorator, therefore value from input decorator is received after the rendering has completed. The binding seems to happen as the -- select -- option isn't shown ... yes, that is happening because the @Input value is undefined (when rendering) so not option is shown at all
– Gabriel Lopez
Nov 14 '18 at 22:08
@ConnorsFan I have it working elsewhere as well, which is why I'm so confused. The value is defined as a boolean, and the webservice is definitely returning just
trueand not the string true.– Gargoyle
Nov 14 '18 at 23:00
@Gargoyle but undefined === null is false so if primaryValue is undefined
<option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>wont show– Gabriel Lopez
Nov 14 '18 at 23:10
@GabrielLopez Yes, sorry I read your initial comment wrong. Is the
OnChangesdifferent from using the getter/setter pattern? Updated the question to show I'm explicitly using that now.– Gargoyle
Nov 14 '18 at 23:14