Input box attribute set dynamically on radio button change

Question

I am having 20 mat-expansion-panel and each expansion-panel having one radio group and each radio group having 5 radio buttons, and below radio button there is one comment box. So I want something like when i select third radio button then specific this expansion-panel comment box will optional otherwise it's required. Currently, change happening in all mat-expansion-panel so want do changes on a specific panel that i have select radio button. So can you please provide me an example something like it.

My Json Data :

    {
     "id":"2",
     "category":"Charactor",
     "questions":[
        {
           "id":"22",
           "question":"How do I update WordPress?",
           "option":[
              {
                 "id":"24",
                 "option_name":"Option1"
              },
              {
                 "id":"25",
                 "option_name":"Option2"
              },
              {
                 "id":"26",
                 "option_name":"Option3"
              },
              {
                 "id":"27",
                 "option_name":"Option4"
              },
              {
                 "id":"28",
                 "option_name":"Option5"
              }
           ]
        },
        {
           "id":"29",
           "question":"Can I import my posts from another blog or blogging platform?",
           "option":[
              {
                 "id":"46",
                 "option_name":"Option1"
              },
              {
                 "id":"47",
                 "option_name":"Option2"
              },
              {
                 "id":"48",
                 "option_name":"Option3"
              },
              {
                 "id":"49",
                 "option_name":"Option4"
              },
              {
                 "id":"50",
                 "option_name":"Option5"
              }
           ]
        },
        {
           "id":"33",
           "question":"Can I import my posts from another blog or blogging platform?",
           "option":[
              {
                 "id":"66",
                 "option_name":"Option1"
              },
              {
                 "id":"67",
                 "option_name":"Option2"
              },
              {
                 "id":"68",
                 "option_name":"Option3"
              },
              {
                 "id":"69",
                 "option_name":"Option4"
              },
              {
                 "id":"70",
                 "option_name":"Option5"
              }
           ]
        },
        {
           "id":"37",
           "question":"Can I import my posts from another blog or blogging platform?",
           "option":[
              {
                 "id":"86",
                 "option_name":"Option1"
              },
              {
                 "id":"87",
                 "option_name":"Option2"
              },
              {
                 "id":"88",
                 "option_name":"Option3"
              },
              {
                 "id":"89",
                 "option_name":"Option4"
              },
              {
                 "id":"90",
                 "option_name":"Option5"
              }
           ]
        },
        {
           "id":"41",
           "question":"Can I import my posts from another blog or blogging platform?",
           "option":[
              {
                 "id":"106",
                 "option_name":"Option1"
              },
              {
                 "id":"107",
                 "option_name":"Option2"
              },
              {
                 "id":"108",
                 "option_name":"Option3"
              },
              {
                 "id":"109",
                 "option_name":"Option4"
              },
              {
                 "id":"110",
                 "option_name":"Option5"
              }
           ]
        }
     ]
  }
}

Below is a screenshot :

Output of Data is as below :

thanks in advance.

<div class="question_inner" *ngFor="let question of evaluation.questions; let i=index">
      <mat-expansion-panel [ngClass]="{'is-has-error': questionForm.submitted && questionForm.invalid}" #matpan  [expanded]="step === i" (opened)="setStep(i)" hideToggle>
        <mat-expansion-panel-header>
          <mat-panel-title>
           <span matBadge="{{i+1}}" matBadgeOverlap="false"></span> {{question.question}}
          </mat-panel-title>
          <mat-panel-description [ngClass]="{'is-selected-option': isSelectedVal == question.id}">
                        <!-- <mat-icon class="usricn" *ngIf="question_sel.invalid || (q_comment.invalid && curOptionIndex != 2)" matTooltip="Answer Not Selected"
                        matTooltipClass="pf-tooltip-blue">account_circle</mat-icon>
                <mat-icon *ngIf="question_sel.valid && ((q_comment.valid && curOptionIndex != 2) || (curOptionIndex == 2))" matTooltip="Answer Selected"
                        matTooltipClass="pf-tooltip-blue">done_outline</mat-icon> -->
                        <mat-icon class="usricn" *ngIf="question_sel.invalid || comment_bx.invalid" matTooltip="Answer Not Selected"
                        matTooltipClass="pf-tooltip-blue">account_circle</mat-icon>
                <mat-icon *ngIf="question_sel.valid && comment_bx.valid" matTooltip="Answer Selected"
                        matTooltipClass="pf-tooltip-blue">done_outline</mat-icon>
          </mat-panel-description>
            </mat-expansion-panel-header>

            <div class="model_inner_wrap" [ngModelGroup]="question.id">

        <mat-radio-group [name]="question.id" #question_sel="ngModel" [ngModel]="((i == 0) ? firstOptionId : '')" required aria-labelledby="pf-radio-group-label"
        class="pf-radio-button">
        <!-- <mat-radio-group [name]="question.id" #question_sel="ngModel" [ngModel]="((i == 0) ? firstOptionId : '')" required aria-labelledby="pf-radio-group-label"
        class="pf-radio-button" (change)="nextStep()"> -->
            <mat-radio-button class="pf-q-radio-button" *ngFor="let option of question.option; let k=index" [value]="option.id" #cur_radio (change)="questionRadioChange($event, k, matpan)">{{option.option_name}}
              </mat-radio-button>
            </mat-radio-group>

            <mat-form-field class="evaluation_comment_bx">
                <!-- <input matInput [placeholder]="curOptionIndex == (2+question.id) ? 'Comment(optional)' : 'Please enter Comment' "  name="comment" #comment  [required]="curOptionIndex != (2+question.id)" ngModel> -->
                <input matInput placeholder="Please enter Comment" id="cmt{{question.id}}"  name="comment" #comment_bx="ngModel" required ngModel>
                <!-- <input matInput class="question_comment" placeholder="Please enter Comment"  name="comment" required ngModel> -->
                <!-- <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                    Please enter a valid email address
                </mat-error> -->
            </mat-form-field>

        </div>

         <!-- <ul>
             <li *ngFor="let option of question.option; let j=index">
                  <input type="radio" [name]="question.id" [(ngModel)] = "question.id" [value]="option.id">{{option.option_name}}
             </li>
         </ul> -->

        <mat-action-row>
        <button mat-button *ngIf="i != 0" color="warn" (click)="prevStep()" matTooltip="Goto Previous Question"
            matTooltipClass="pf-tooltip-blue">Previous</button>
        <button mat-button *ngIf="i != 19" color="primary" (click)="nextStep()" matTooltip="Goto Next Question"
            matTooltipClass="pf-tooltip-blue">Next</button>
        </mat-action-row>
        </mat-expansion-panel>
        </div>

    </mat-expansion-panel>

    </div>

Comments are not for extended discussion; this conversation has been moved to chat. — samliew
– samliew, Commented Jun 26, 2019 at 5:06

Nabil Shahid · Accepted Answer · 2019-06-26 12:05:34Z

Here i have updated the stackblitz you provided and changed a few things to fix your implementation.

They way you were settings required i.e. [required]="(curOptionIndex == question.id) && optsel != 2" curOptionIndex and optsel were updating on each radio button change event. So if it set the first comment box required correctly on a selection in first radio group, when you select an option in the second radio group, optsel andcurOptionIndex update and the required property of first comment box becomes invalid again. I have done the following two changes in you solution:

Change 1:

I have added commentsRequired array for each question indicating on which options the comments are required for each question. Also, changed [required]="(curOptionIndex == question.id) && optsel != 2" to [required]="question.commentsRequired.indexOf(question_sel.value)>-1". So e.g. if commentsRequired from first question is ["49","50"] it means that comments are required for options with these IDs in that question.

Change 2:

ExpressionChangedAfterItHasBeenCheckedError was occurring in case of [disabled]="!questionForm.valid" due to which and some *ngIf conditions due to which submit button styles were not updating on radio buttons change. So i ran change detection cycle explicitly:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{  
  this.cdRef.detectChanges();
}

Now in current solution, if you select third option in first radio group, the comments for that panel will become required. For second radio group, comments will be required for 4th and 5th options. You can change contents of commentsRequired for each section to specify the options for which comments are required.

Collectives™ on Stack Overflow

Input box attribute set dynamically on radio button change

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related