CODEWITHSUNDEEP
angularformsradio-button
Milo
Milo

Reputation: 3443

Angular2+ Radio Button Not Clickable

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?

Upvotes: 2

Views: 445

Answers (1)

Milo
Milo

Reputation: 3443

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>

Upvotes: 2

Related Questions