Angular2+ Radio Button Not Clickable
0
I have a dropdown that once selected presents to the user a list of questions. Each question has the same set of answers (Yes, No, Unknown) which I would like to be represented by radio buttons. After some research I came up with the following code:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
The *ngIf conditions on the inputs are so Unknown is always chosen on init.
The list of questions/answers renders fine but I cannot actually click on any of the options for answers. Any suggestions where I am going wrong?
angular forms radio asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
add a comment |
0
I have a dropdown that once selected presents to the user a list of questions. Each question has the same set of answers (Yes, No, Unknown) which I would like to be represented by radio buttons. After some research I came up with the following code:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
The *ngIf conditions on the inputs are so Unknown is always chosen on init.
The list of questions/answers renders fine but I cannot actually click on any of the options for answers. Any suggestions where I am going wrong?
angular forms radio asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
I can't seem to reproduce. When I use this code in a Stackblitz I can select an answer without a problem stackblitz.com/edit/…
– user184994
Nov 28 '18 at 21:01
Are you clicking on the label or radio(circle) itself?
– Bagherani
Nov 28 '18 at 21:02
rejnev either or. @user184994 maybe it's because I am within a reactive form? Do I need to change anything in that case?
– Milo
Nov 28 '18 at 21:07
Are you able to create a Stackblitz that reproduces the error please?
– user184994
Nov 28 '18 at 21:19
add a comment |
0
0
0
I have a dropdown that once selected presents to the user a list of questions. Each question has the same set of answers (Yes, No, Unknown) which I would like to be represented by radio buttons. After some research I came up with the following code:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
The *ngIf conditions on the inputs are so Unknown is always chosen on init.
The list of questions/answers renders fine but I cannot actually click on any of the options for answers. Any suggestions where I am going wrong?
angular forms radio asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
I have a dropdown that once selected presents to the user a list of questions. Each question has the same set of answers (Yes, No, Unknown) which I would like to be represented by radio buttons. After some research I came up with the following code:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
The *ngIf conditions on the inputs are so Unknown is always chosen on init.
The list of questions/answers renders fine but I cannot actually click on any of the options for answers. Any suggestions where I am going wrong?
angular forms radio angular forms radio asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
asked Nov 28 '18 at 19:53
MiloMilo
1,94661529
1,94661529
I can't seem to reproduce. When I use this code in a Stackblitz I can select an answer without a problem stackblitz.com/edit/…
– user184994
Nov 28 '18 at 21:01
Are you clicking on the label or radio(circle) itself?
– Bagherani
Nov 28 '18 at 21:02
rejnev either or. @user184994 maybe it's because I am within a reactive form? Do I need to change anything in that case?
– Milo
Nov 28 '18 at 21:07
Are you able to create a Stackblitz that reproduces the error please?
– user184994
Nov 28 '18 at 21:19
add a comment |
I can't seem to reproduce. When I use this code in a Stackblitz I can select an answer without a problem stackblitz.com/edit/…
– user184994
Nov 28 '18 at 21:01
Are you clicking on the label or radio(circle) itself?
– Bagherani
Nov 28 '18 at 21:02
rejnev either or. @user184994 maybe it's because I am within a reactive form? Do I need to change anything in that case?
– Milo
Nov 28 '18 at 21:07
Are you able to create a Stackblitz that reproduces the error please?
– user184994
Nov 28 '18 at 21:19
I can't seem to reproduce. When I use this code in a Stackblitz I can select an answer without a problem stackblitz.com/edit/…
– user184994
Nov 28 '18 at 21:01
I can't seem to reproduce. When I use this code in a Stackblitz I can select an answer without a problem stackblitz.com/edit/…
– user184994
Nov 28 '18 at 21:01
Are you clicking on the label or radio(circle) itself?
– Bagherani
Nov 28 '18 at 21:02
Are you clicking on the label or radio(circle) itself?
– Bagherani
Nov 28 '18 at 21:02
rejnev either or. @user184994 maybe it's because I am within a reactive form? Do I need to change anything in that case?
– Milo
Nov 28 '18 at 21:07
rejnev either or. @user184994 maybe it's because I am within a reactive form? Do I need to change anything in that case?
– Milo
Nov 28 '18 at 21:07
Are you able to create a Stackblitz that reproduces the error please?
– user184994
Nov 28 '18 at 21:19
Are you able to create a Stackblitz that reproduces the error please?
– user184994
Nov 28 '18 at 21:19
add a comment |
1 Answer
1
active
oldest
votes
0
It turns out the classes k-radio and k-radio-label (using Kendo UI for Angular) needed id="" and for="" in the respective elements to work properly:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input id="{{ question.typeValue + n }}" *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input id="{{ question.typeValue + n }}" *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label" for="{{ question.typeValue + n }}">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
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%2f53527113%2fangular2-radio-button-not-clickable%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
0
It turns out the classes k-radio and k-radio-label (using Kendo UI for Angular) needed id="" and for="" in the respective elements to work properly:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input id="{{ question.typeValue + n }}" *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input id="{{ question.typeValue + n }}" *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label" for="{{ question.typeValue + n }}">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
add a comment |
0
It turns out the classes k-radio and k-radio-label (using Kendo UI for Angular) needed id="" and for="" in the respective elements to work properly:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input id="{{ question.typeValue + n }}" *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input id="{{ question.typeValue + n }}" *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label" for="{{ question.typeValue + n }}">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
add a comment |
0
0
0
It turns out the classes k-radio and k-radio-label (using Kendo UI for Angular) needed id="" and for="" in the respective elements to work properly:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input id="{{ question.typeValue + n }}" *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input id="{{ question.typeValue + n }}" *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label" for="{{ question.typeValue + n }}">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
It turns out the classes k-radio and k-radio-label (using Kendo UI for Angular) needed id="" and for="" in the respective elements to work properly:
<fieldset *ngIf="selectedService">
<div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
<!-- START Service Specific Questions START -->
<div class="col-lg-12">
<label>{{ question.questionText }}</label>
</div>
<div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
<input id="{{ question.typeValue + n }}" *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
<input id="{{ question.typeValue + n }}" *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
<label class="k-radio-label" for="{{ question.typeValue + n }}">{{ answer.answerText }}</label>
</div>
<!-- END Service Specific Questions END -->
</div>
</fieldset>
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
answered Nov 29 '18 at 13:34
MiloMilo
1,94661529
1,94661529
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.
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%2f53527113%2fangular2-radio-button-not-clickable%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
I can't seem to reproduce. When I use this code in a Stackblitz I can select an answer without a problem stackblitz.com/edit/…
– user184994
Nov 28 '18 at 21:01
Are you clicking on the label or radio(circle) itself?
– Bagherani
Nov 28 '18 at 21:02
rejnev either or. @user184994 maybe it's because I am within a reactive form? Do I need to change anything in that case?
– Milo
Nov 28 '18 at 21:07
Are you able to create a Stackblitz that reproduces the error please?
– user184994
Nov 28 '18 at 21:19