输入框属性在单选按钮更改时动态设置 [英] Input box attribute set dynamically on radio button change
问题描述
我有20个扩展板，每个扩展板有一个单选组，每个单选组有5个单选按钮，单选按钮下面有一个注释框.所以我想要类似的东西，当我选择第三个单选按钮时，此扩展面板注释框将是可选的，否则是必需的.当前，所有席子扩展面板中都发生了更改，因此我想在具有选择单选按钮的特定面板上进行更改.因此，能否请您提供一个类似的示例.
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.
我的Json数据:
{
"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"
}
]
}
]
}
}
下面是屏幕截图:
数据输出如下:
提前谢谢.
<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>
推荐答案
这里更新了您提供的stackblitz，并更改了一些内容以修复您的实现.
Here i have updated the stackblitz you provided and changed a few things to fix your implementation.
以它们的方式设置required，即[required]="(curOptionIndex == question.id) && optsel != 2" curOptionIndex和optsel在每个单选按钮更改事件中进行更新.因此，如果它在第一个单选组中的选择上正确设置了需要的第一个注释框，则当您在第二个单选组中选择一个选项时，optsel和curOptionIndex更新，并且第一个注释框的required属性再次变为无效.
我在您的解决方案中做了以下两项更改:
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:
更改1:
我为每个问题添加了commentsRequired数组，以指示每个问题需要注释的选项.同样，将[required]="(curOptionIndex == question.id) && optsel != 2"更改为[required]="question.commentsRequired.indexOf(question_sel.value)>-1".所以如果第一个问题的commentsRequired是["49","50"]，则表示该问题中具有这些ID的选项需要注释.
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.
更改2:
ExpressionChangedAfterItHasBeenCheckedError，这是由于单选按钮上的提交按钮样式未更新而导致的，以及某些*ngIf条件.所以我明确地运行了更改检测周期:
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();
}
在当前解决方案中，如果您在第一个单选按钮组中选择第三个选项，则该面板的注释将变为必需.对于第二个广播组，第4个和第5个选项将需要注释.您可以为每个部分更改commentsRequired的内容，以指定需要注释的选项.
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.
这篇关于输入框属性在单选按钮更改时动态设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
