Angular как заставить массив вложенных форм действовать независимо

Question

Я пытаюсь решить проблему изменения поля в обоих полях массива форм при изменении типа поля.

Как вы можно увидеть на изображении. Когда я выбираю имя левого поля, правое поле меняется на текстовое поле. Но когда добавляется новое поле, он генерирует раскрывающееся поле справа и также меняет верхнее. Как заставить эти поля действовать независимо?

Я также думаю, что проблема заключается в функции ngTemplate, которую я использую, чтобы проверить, является ли поле опцией или текстовым полем. возможно, это глобальная форма в той форме, которую я использую, если это имеет смысл?

Html

<div class="filter-wrapper">
  <form [formGroup]="usersForm" (ngSubmit)="onSearch()">
    <ng-container *ngFor="let userFormGroup of usersForm.controls.users.controls; let i = index">
      <div [formGroup]="userFormGroup" class="filter-form">
        <div class="search-wrapper">
          <mat-form-field class="form-toggle input-half dialog-dropdown">
            <mat-select formControlName="columnOptions">
              <mat-option value="null">
                -- none --
              </mat-option>
              <mat-option *ngFor="let formOption of displayedOptions" [value]="formOption.name" (click)="getOptionData(formOption.name)">
                {{formOption.title}}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <span class="match-txt">matches</span>
          <mat-form-field class="input dialog-dropdown">
            <ng-container *ngIf="selectedOpt.options?.length > 0; else inputField">
              <mat-select formControlName="columnValues">
                <mat-option value="null">
                  -- none --
                </mat-option>
                <mat-option *ngFor="let formOption of selectedOpt.options" [value]="formOption.display_long_value || formOption.description">
                  {{ formOption.display_long_value || formOption.description }}
                </mat-option>
              </mat-select>
            </ng-container>
            <ng-template #inputField>
              <input matInput type="text" formControlName="columnValues">
            </ng-template>
          </mat-form-field>
        </div>
        <div class="action-btns">
          <mat-icon (click)="addFormControl()">add_circle_outline</mat-icon>

          <ng-container *ngIf="i !== 0">
            <mat-icon (click)="removeFormControl(i)">remove_circle_outline</mat-icon>
          </ng-container>
        </div>
      </div>
    </ng-container>
  </form>
</div>

Конструктор форм

this.usersForm = this.fb.group({
  users: this.fb.array([
    this.fb.group({
      columnOptions: ['', Validators.required],
      columnValues: ['', Validators.required],
    }),
  ])
})

https://stackblitz.com/edit/angular-l7stwq

Answer 1

stackblitz не работал, потому что отсутствовал импорт для инициализации columnOption / columnValues, но я думаю, вы должны ссылаться на группы форм, созданные вашим массивом. Обычно я начинаю с регистрации formgroup.value на каждом этапе, чтобы убедиться, что My ui соответствует моей модели данных, но попробуйте следующее:

изменить

<div [formGroup]="userFormGroup" class="filter-form">

на

  <div [formGroupName]="i" class="filter-form">

Это должно совпадать с тем, что ваша модель будет показывать для formArray (поскольку группы имеют имена на основе индексов, каждая из которых является «массивами». Чтобы запустить stackblitz, я бы сделал несколько проб и ошибок, чтобы увидеть, где я получаю

Удачи / удачного кодирования!