输入框属性在单选按钮更改时动态设置 [英] Input box attribute set dynamically on radio button change
问题描述
我有 20 个垫子扩展面板，每个扩展面板有一个单选组，每个单选组有 5 个单选按钮，单选按钮下方有一个评论框.所以我想要一些类似的东西，当我选择第三个单选按钮时，特定的这个扩展面板评论框将是可选的，否则它是必需的.目前，所有 mat-expansion-panel 都发生了变化，所以想要在我选择单选按钮的特定面板上进行更改.所以你能不能给我一个类似的例子.
我的 Json 数据:
<代码> {"id":"2","类别":"角色",问题":[{"id":"22","question":"如何更新WordPress?",选项":[{"id":"24","option_name":"选项1"},{"id":"25","option_name":"选项2"},{"id":"26","option_name":"选项3"},{"id":"27","option_name":"选项4"},{"id":"28","option_name":"选项5"}]},{"id":"29","question":"我可以从其他博客或博客平台导入我的帖子吗?",选项":[{"id":"46","option_name":"选项1"},{"id":"47","option_name":"选项2"},{"id":"48","option_name":"选项3"},{"id":"49","option_name":"选项4"},{"id":"50","option_name":"选项5"}]},{"id":"33","question":"我可以从其他博客或博客平台导入我的帖子吗?",选项":[{"id":"66","option_name":"选项1"},{"id":"67","option_name":"选项2"},{"id":"68","option_name":"选项3"},{"id":"69","option_name":"选项4"},{"id":"70","option_name":"选项5"}]},{"id":"37","question":"我可以从其他博客或博客平台导入我的帖子吗?",选项":[{"id":"86","option_name":"选项1"},{"id":"87","option_name":"选项2"},{"id":"88","option_name":"选项3"},{"id":"89","option_name":"选项4"},{"id":"90","option_name":"选项5"}]},{"id":"41","question":"我可以从其他博客或博客平台导入我的帖子吗?",选项":[{"id":"106","option_name":"选项1"},{"id":"107","option_name":"选项2"},{"id":"108","option_name":"选项3"},{"id":"109","option_name":"选项4"},{"id":"110","option_name":"选项5"}]}]}}下面是截图:
输出数据如下:
提前致谢.
<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>{{问题.问题}}</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="未选择答案"matTooltipClass="pf-tooltip-blue">account_circle</mat-icon><mat-icon *ngIf="question_sel.valid && ((q_comment.valid && curOptionIndex != 2) || (curOptionIndex == 2))" matTooltip="已选择答案"matTooltipClass="pf-tooltip-blue">done_outline</mat-icon>--><mat-icon class="usricn" *ngIf="question_sel.invalid || comment_bx.invalid" matTooltip="未选择答案"matTooltipClass="pf-tooltip-blue">account_circle</mat-icon><mat-icon *ngIf="question_sel.valid && comment_bx.valid" matTooltip="已选择答案"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 : '')" 需要 aria-labelledby="pf-radio-组标签"class="pf-radio-button"><!-- <mat-radio-group [name]="question.id" #question_sel="ngModel" [ngModel]="((i == 0) ? firstOptionId : '')" 需要 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)' : '请输入评论' " name="comment" #comment [required]="curOptionIndex != (2+question.id)" ngModel>--><input matInput placeholder="请输入评论" id="cmt{{question.id}}" name="comment" #comment_bx="ngModel" required ngModel><!-- <input matInput class="question_comment" placeholder="请输入评论" name="comment" required ngModel>--><!-- <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">请输入有效的电子邮件地址</mat-error>--></mat-form-field><!-- <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}}--><mat-action-row><button mat-button *ngIf="i != 0" color="warn" (click)="prevStep()" matTooltip="转到上一个问题"matTooltipClass="pf-tooltip-blue">上一个</button><button mat-button *ngIf="i != 19" color="primary" (click)="nextStep()" matTooltip="转到下一个问题"matTooltipClass="pf-tooltip-blue">下一步</button></mat-action-row></mat-expansion-panel>
</mat-expansion-panel>
这里更新了您提供的 stackblitz 并更改了一些内容以修复您的实现.
他们的方式你是设置 required 即 [required]="(curOptionIndex == question.id) && optsel != 2" curOptionIndex 和 optsel 正在更新每个单选按钮更改事件.因此，如果它在第一个单选组中的选择上正确设置了第一个评论框，当您在第二个单选组中选择一个选项时，optsel 和curOptionIndex 更新和 <第一个注释框的 code>required 属性再次无效.我在您的解决方案中做了以下两个更改:
变化 1:
我为每个问题添加了 commentsRequired 数组，指示每个问题需要哪些选项的注释.此外，将 [required]="(curOptionIndex == question.id) && optsel != 2" 更改为 [required]="question.commentsRequired.indexOf(question_sel.value)>-1".所以例如如果第一个问题中的 commentsRequired 是 ["49","50"] 则意味着该问题中具有这些 ID 的选项需要注释.
变化 2:
ExpressionChangedAfterItHasBeenCheckedError 发生在 [disabled]="!questionForm.valid" 和一些 *ngIf 条件的情况下哪些提交按钮样式未随单选按钮更改而更新.所以我明确地运行了变更检测周期:
import { ChangeDetectorRef } from '@angular/core';构造函数(私有 cdRef:ChangeDetectorRef){}ngAfterViewChecked(){this.cdRef.detectChanges();}现在在当前的解决方案中，如果您在第一个单选组中选择第三个选项，将需要该面板的注释.对于第二个广播组，第 4 个和第 5 个选项需要评论.您可以更改每个部分的 commentsRequired 内容以指定需要评论的选项.
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>
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.
这篇关于输入框属性在单选按钮更改时动态设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
