Атрибут поля ввода динамически устанавливается при смене переключателя

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

Здесь Я обновил выделенный вами стек и изменил несколько вещей, чтобы исправить вашу реализацию.

Они соответствуют вашим настройкам required т.е. [required]="(curOptionIndex == question.id) && optsel != 2" curOptionIndex и optsel обновлялись при каждом событии смены переключателя.Таким образом, если он правильно установил первое поле комментария для выбора в первой группе радиосвязи, при выборе параметра во второй группе радиосвязи optsel и curOptionIndex update и свойство required первого поля комментария снова становятся недействительными,Я внес следующие два изменения в ваше решение:

Изменение 1:

Я добавил массив commentsRequired для каждого вопроса, указывая, по каким вариантам требуются комментарииза каждый вопрос.Также изменено [required]="(curOptionIndex == question.id) && optsel != 2" на [required]="question.commentsRequired.indexOf(question_sel.value)>-1".Например, если commentsRequired из первого вопроса - ["49","50"], это означает, что для вариантов с этими идентификаторами в этом вопросе требуются комментарии.

Изменение 2:

ExpressionChangedAfterItHasBeenCheckedError происходило в случае [disabled]="!questionForm.valid", из-за чего и некоторые *ngIf условия, из-за которых стили кнопок отправки не обновлялись при смене переключателей.Итак, я запустил цикл обнаружения изменений явно:

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

constructor(private cdRef:ChangeDetectorRef) {}

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

Теперь в текущем решении, если вы выберете третий вариант в первой группе радиосвязи, комментарии для этой панели станут обязательными.Для второй группы радиосвязи, комментарии будут необходимы для 4-го и 5-го вариантов.Вы можете изменить содержимое commentsRequired для каждого раздела, чтобы указать параметры, для которых требуются комментарии.