单选按钮更改时动态设置的输入框属性
我有20个扩展板，每个扩展板有一个单选组，每个单选组有5个单选按钮，单选按钮下面有一个注释框。所以我想要类似的东西，当我选择第三个单选按钮时，此扩展面板注释框将是可选的，否则是必需的。当前，所有席子扩展面板中都在发生更改，因此要在我选择了单选按钮的特定面板上进行更改。所以请您提供一个类似的例子。
我的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>
1 个答案:
答案 0 :(得分：2)
Here我已经更新了您提供的stackblitz，并更改了一些内容来修复您的实现。
您使用的设置方式是required，即[required]="(curOptionIndex == question.id) && optsel != 2" curOptionIndex和optsel在每个单选按钮更改事件中都在更新。因此，如果它在第一个单选组中的选择上正确设置了第一个注释框，则当您在第二个单选组中选择一个选项时，optsel和curOptionIndex会更新，并且{第一个注释框再次变为无效。
我在您的解决方案中做了以下两项更改：
更改1：
我为每个问题添加了required数组，以指示每个问题需要注释的选项。同样，将commentsRequired更改为[required]="(curOptionIndex == question.id) && optsel != 2"。所以例如如果第一个问题的[required]="question.commentsRequired.indexOf(question_sel.value)>-1"是commentsRequired，则表示该问题中具有这些ID的选项需要注释。
更改2：
在["49","50"]的情况下发生 ExpressionChangedAfterItHasBeenCheckedError，这是由于某些单选按钮上的提交按钮样式没有更新而导致的[disabled]="!questionForm.valid"条件。因此，我明确地运行了更改检测周期：
*ngIf在当前解决方案中，如果您在第一个单选组中选择第三个选项，则该面板的注释将变为必需。对于第二个广播组，第4个和第5个选项将需要注释。您可以为每个部分更改import { ChangeDetectorRef } from '@angular/core';
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewChecked()
{
this.cdRef.detectChanges();
}
的内容，以指定需要注释的选项。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？