Angular 6 radio button is not checked
0
I have the following piece of code,
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" ngModel #versioning="ngModel">
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked=”checked” value="Disabled" ngModel #versioning="ngModel">
<label class="form-check-label">Disabled</label>
</div>
</div>
I want the "Disabled" radio button, selected by default. I tried giving checked, checked="checked", [checked]="true", checked="true" but nothing works. I searched for similar questions in stack overflow and didn't found any answer. thus the post. Help will be highly appreciated. Thanks.
angular
edited Nov 21 '18 at 8:56
Flix
15711
asked Nov 21 '18 at 8:26
arunan
1811314
add a comment |
0
I have the following piece of code,
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" ngModel #versioning="ngModel">
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked=”checked” value="Disabled" ngModel #versioning="ngModel">
<label class="form-check-label">Disabled</label>
</div>
</div>
I want the "Disabled" radio button, selected by default. I tried giving checked, checked="checked", [checked]="true", checked="true" but nothing works. I searched for similar questions in stack overflow and didn't found any answer. thus the post. Help will be highly appreciated. Thanks.
angular
edited Nov 21 '18 at 8:56
Flix
15711
asked Nov 21 '18 at 8:26
arunan
1811314
What is the#versioningused for? Because the problem is that the empty ngModel is interfering with thecheckedattribute.
– Flix
Nov 21 '18 at 8:33
1
The model is the single point of truth. Bind your inputs to a model with `[(ngModel)]="versioning" removed the checked=”checked” and the #versioning="ngModel", and just set the value of YourComponent.versioning to 'Enabled' or 'Disabled'. angular.io/guide/forms
– JB Nizet
Nov 21 '18 at 8:40
@JBNizet Thanks. It works!
– arunan
Nov 21 '18 at 10:12
add a comment |
0
0
0
I have the following piece of code,
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" ngModel #versioning="ngModel">
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked=”checked” value="Disabled" ngModel #versioning="ngModel">
<label class="form-check-label">Disabled</label>
</div>
</div>
I want the "Disabled" radio button, selected by default. I tried giving checked, checked="checked", [checked]="true", checked="true" but nothing works. I searched for similar questions in stack overflow and didn't found any answer. thus the post. Help will be highly appreciated. Thanks.
angular
edited Nov 21 '18 at 8:56
Flix
15711
asked Nov 21 '18 at 8:26
arunan
1811314
I have the following piece of code,
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" ngModel #versioning="ngModel">
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked=”checked” value="Disabled" ngModel #versioning="ngModel">
<label class="form-check-label">Disabled</label>
</div>
</div>
I want the "Disabled" radio button, selected by default. I tried giving checked, checked="checked", [checked]="true", checked="true" but nothing works. I searched for similar questions in stack overflow and didn't found any answer. thus the post. Help will be highly appreciated. Thanks.
angular
angular
edited Nov 21 '18 at 8:56
Flix
15711
asked Nov 21 '18 at 8:26
arunan
1811314
edited Nov 21 '18 at 8:56
Flix
15711
asked Nov 21 '18 at 8:26
arunan
1811314
edited Nov 21 '18 at 8:56
Flix
15711
edited Nov 21 '18 at 8:56
Flix
15711
edited Nov 21 '18 at 8:56
Flix
15711
15711
asked Nov 21 '18 at 8:26
arunan
1811314
asked Nov 21 '18 at 8:26
arunan
1811314
asked Nov 21 '18 at 8:26
arunan
1811314
1811314
What is the#versioningused for? Because the problem is that the empty ngModel is interfering with thecheckedattribute.
– Flix
Nov 21 '18 at 8:33
1
The model is the single point of truth. Bind your inputs to a model with `[(ngModel)]="versioning" removed the checked=”checked” and the #versioning="ngModel", and just set the value of YourComponent.versioning to 'Enabled' or 'Disabled'. angular.io/guide/forms
– JB Nizet
Nov 21 '18 at 8:40
@JBNizet Thanks. It works!
– arunan
Nov 21 '18 at 10:12
add a comment |
What is the#versioningused for? Because the problem is that the empty ngModel is interfering with thecheckedattribute.
– Flix
Nov 21 '18 at 8:33
1
The model is the single point of truth. Bind your inputs to a model with `[(ngModel)]="versioning" removed the checked=”checked” and the #versioning="ngModel", and just set the value of YourComponent.versioning to 'Enabled' or 'Disabled'. angular.io/guide/forms
– JB Nizet
Nov 21 '18 at 8:40
@JBNizet Thanks. It works!
– arunan
Nov 21 '18 at 10:12
What is the
#versioning used for? Because the problem is that the empty ngModel is interfering with the checked attribute.– Flix
Nov 21 '18 at 8:33
What is the
#versioning used for? Because the problem is that the empty ngModel is interfering with the checked attribute.– Flix
Nov 21 '18 at 8:33
1
1
The model is the single point of truth. Bind your inputs to a model with `[(ngModel)]="versioning" removed the checked=”checked” and the #versioning="ngModel", and just set the value of YourComponent.versioning to 'Enabled' or 'Disabled'. angular.io/guide/forms
– JB Nizet
Nov 21 '18 at 8:40
The model is the single point of truth. Bind your inputs to a model with `[(ngModel)]="versioning" removed the checked=”checked” and the #versioning="ngModel", and just set the value of YourComponent.versioning to 'Enabled' or 'Disabled'. angular.io/guide/forms
– JB Nizet
Nov 21 '18 at 8:40
@JBNizet Thanks. It works!
– arunan
Nov 21 '18 at 10:12
@JBNizet Thanks. It works!
– arunan
Nov 21 '18 at 10:12
add a comment |
1 Answer
1
active
oldest
votes
-1
use disabled attribute like [disabled]="isDisabled"
toggle isDisabled to enable/disable the radio button.
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" [(ngModel)]="selectedVal" >
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked="checked" [(ngModel)]="selectedVal" value="Disabled" [disabled]="isDisabled">
<label class="form-check-label">Disabled</label>
</div>
</div>
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
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
});
}
});
draft saved
draft discarded
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%2f53407884%2fangular-6-radio-button-is-not-checked%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
-1
use disabled attribute like [disabled]="isDisabled"
toggle isDisabled to enable/disable the radio button.
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" [(ngModel)]="selectedVal" >
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked="checked" [(ngModel)]="selectedVal" value="Disabled" [disabled]="isDisabled">
<label class="form-check-label">Disabled</label>
</div>
</div>
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
add a comment |
-1
use disabled attribute like [disabled]="isDisabled"
toggle isDisabled to enable/disable the radio button.
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" [(ngModel)]="selectedVal" >
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked="checked" [(ngModel)]="selectedVal" value="Disabled" [disabled]="isDisabled">
<label class="form-check-label">Disabled</label>
</div>
</div>
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
add a comment |
-1
-1
-1
use disabled attribute like [disabled]="isDisabled"
toggle isDisabled to enable/disable the radio button.
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" [(ngModel)]="selectedVal" >
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked="checked" [(ngModel)]="selectedVal" value="Disabled" [disabled]="isDisabled">
<label class="form-check-label">Disabled</label>
</div>
</div>
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
use disabled attribute like [disabled]="isDisabled"
toggle isDisabled to enable/disable the radio button.
<div class="col-md-6 col-lg-6 col-xl-6 mb-5">
<label>Versioning</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" value="Enabled" [(ngModel)]="selectedVal" >
<label class="form-check-label">Enabled</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="versioning" checked="checked" [(ngModel)]="selectedVal" value="Disabled" [disabled]="isDisabled">
<label class="form-check-label">Disabled</label>
</div>
</div>
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
answered Nov 21 '18 at 8:50
Shiv Kumar Baghel
1,2923620
1,2923620
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53407884%2fangular-6-radio-button-is-not-checked%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
What is the
#versioningused for? Because the problem is that the empty ngModel is interfering with thecheckedattribute.– Flix
Nov 21 '18 at 8:33
1
The model is the single point of truth. Bind your inputs to a model with `[(ngModel)]="versioning" removed the checked=”checked” and the #versioning="ngModel", and just set the value of YourComponent.versioning to 'Enabled' or 'Disabled'. angular.io/guide/forms
– JB Nizet
Nov 21 '18 at 8:40
@JBNizet Thanks. It works!
– arunan
Nov 21 '18 at 10:12