Question

我有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>

Answer 1

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(); }的内容，以指定需要注释的选项。

单选按钮更改时动态设置的输入框属性

1 个答案: