ngЕсли не обновляется представление в угловых реактивных формах

Question

У меня есть реактивная форма, и я получаю данные из JSON.У него есть радио кнопки.Там, если пользователь нажимает «Для кого-то», я хочу показать дополнительные поля (это уже рендеринг).Если пользователь нажимает «Я», я хочу скрыть это дополнительное поле.Я попробовал с ngIf здесь.Но мой взгляд не обновляется.Также я попробовал ngzone и опции settimeout.Но ничего не работает.Это пример стекаблиц

https://stackblitz.com/edit/github-ubotkt

Может ли кто-нибудь помочь мне в этом

Answer 1

Coderaizer, вам нужно знать, что вы хотите получить.Видя ваш код, я думаю, вы хотите получить что-то вроде

{answer:...,answerExt:...}

Что ж, в вашем коде есть некоторые ошибки.(некоторые из них являются концептуальными ошибками)

Ваш ngOnInit в компоненте form-main должен учитывать, когда данные имеют ключ и если этот ключ не повторяется.В качестве supouse вы хотите получить вышеуказанные данные

ngOnInit() {
    const formContent: any = {};
    this.dataList.forEach(data => {
      //we check if the formContent has or not the property data.key
      if (data.key && !formContent[data.key])
      {
        formContent[data.key] = new FormControl(data.value);
      }
      //we check if the formContent has or not the property data.key+"Ext"
      if (data.extendedFields && !formContent[data.key+'Ext'])
        formContent[data.key+'Ext'] = new FormControl(data.extendedFields.value);

    });
    this.quizForm = new FormGroup(formContent);

  }

Поскольку у нас может быть два элемента управления (answer и answerExt), в вашем компоненте form-control, в ngOnInit

ngOnInit() {
    this.control = this.parentForm.get(this.data.key);
    this.controlExt = this.parentForm.get(this.data.key+"Ext");
  }

затем, ваш form-control-component.html может быть похож на

<h3>{{data.title}}</h3>

  <label *ngIf="data.controlType == 'text'" [attr.for]="data.key">{{data.label}}</label>
  <input *ngIf="data.controlType == 'text'" [type]="data.type">

  <div *ngIf="data.controlType == 'radio'">
    <ng-container *ngFor="let opt of data.options">
      <label>
        <!--see that we use formControl-->
        <input style="margin-left: 5px;" [formControl]="control" type="radio"
          <!--I use "data.id"-->
          [name]="data.key" [value]="data.id"
          [id]="data.quizId"> {{opt.key}}
      </label>
    </ng-container>
  </div>
  <!--the "if" is simple data.id=control.value-->
  <div *ngIf="data.extendedFields && data.id==control.value">
      <ng-container>
        <label [attr.for]="data.key">{{data.extendedFields.text}}</label>
        <!--see that we use formControl-->
        <input *ngIf="data?.extendedFields.type == 'text'" [formControl]="controlExt">
      </ng-container>
  </div>

Вы можете увидеть работу в stackblitz

ПРИМЕЧАНИЕ. Там много ненужного кода,и «карта» списка данных не понятна, попробуйте просто это.Поэтому, если вы выберете опцию, которая не имеет расширенных полей, вы получите значение

Answer 2

Обновление

В качестве решения вашей проблемы вы можете сделать следующее:

1. Вынуть дополнительные поля из app-form-control до app-form-main
2. Используйте EventEmitter в app-form-control для связи между app-form-control и app-form-main.
3. То, что будет вызываться EventEmitter, на (change) радиостанций.При этом будет выбрано значение / ключ / идентификатор текущего проверенного радио.
4. Считать это значение / ключ / идентификатор в app-form-main и на основе этого показать / скрыть соответствующие дополнительные поля.

Я создал пример вашего кода здесь на stackblitz .

Оригинальный ответ (и актуальная проблема)

Подход, который вы использовали, очень странный.

Это то, что происходит с вашим кодом:

1. app-form-control создается 3 раза, каждый для: Название ( Для кого этот запрос? ), Радиокнопка ( Me ), радиокнопка ( для кого-то другого )
2. Теперь условный вывод extendedFields связан с каждым app-form-control.
3. Итак, когда вы нажимаете на Me радио, вы видите консоль от Me app-form-control, и то же самое происходит с For someone else.
4. Теперь, когда вы нажимаете For someone else, условный флаг showExtraField изменяется, но он изменяется только для For someone else app-form-control.
5. Теперь, когда вы нажимаете Me, условный флагshoeExtraField меняется, но меняется только для Me app-form-control.Условный флаг showExtraField из For someone else app-form-control остается без изменений.
6. Таким образом, поскольку условный флаг не изменяется, он не скрывает дополнительные поля.

Я бы порекомендовал вам изменить подход к созданию элементов управления формой.В противном случае вам будет очень трудно отслеживать ошибки / проблемы.

Answer 3

Простое вложение в опции решило проблему.

<div [formGroup]="parentForm">
  <h3>{{data.title}}</h3>

  <label *ngIf="data.controlType == 'text'" [attr.for]="data.key">{{data.label}}</label>
  <input *ngIf="data.controlType == 'text'" [type]="data.type">

  <!--Single Radio button view-->
  <div *ngIf="data.controlType == 'radio'">
    <ng-container *ngFor="let opt of data.options">
      <label>
        <input style="margin-left: 5px;" #radio (change)="handleChange($event)" type="radio" [name]="data.key" [value]="data.options['0'].value"
          [id]="data.quizId"> {{opt.key}}
      </label>
      <!--Extended field view-->
      <div *ngIf="data.extendedFields && data.extendedFields.type">
        <div *ngIf="data.extendedFields.type == 'text' && radio.checked">
          <ng-container>
            <label [attr.for]="data.key">{{data.extendedFields.text}}</label>
            <input *ngIf="data?.extendedFields.type == 'text'" [formControlName]="data.key">
          </ng-container>
        </div>
      </div>
    </ng-container>
  </div>

Answer 4

Вы установили неверное значение bool, для меня это было верно, а для кого-то - false

if(evt.target.value == "Me"){
  this.showExtraField = false; //change this
}else if(evt.target.value == "For someone else") {
  this.showExtraField =true; //change this
}