Angular - Все входные значения изменяются при некоторых изменениях в Formarray - PullRequest
Новая
       7

Angular - Все входные значения изменяются при некоторых изменениях в Formarray

0 голосов
/ 14 марта 2020

Я работаю с angular материалом, но у меня проблема в Angular 7 с FormArray.

Когда у меня есть только 1 элемент, он работает нормально, но как только я добавляю другой элемент динамически, выбор имеет правильное значение, но связанный ввод имеет то же значение, которое является неправильным. Пример:

1) изменение выбора 1:

  • Значение выбора 1: Элемент1 (правильный)
  • Значение ввода 1: Код1 (правильный)

2) Добавить новый элемент, копируя предыдущие значения:

  • Значение выбора 1: Элемент1 (правильный)
  • Значение ввода 1: Код1 (правильный)
  • Значение выбора 2: Элемент 1 (правильный)
  • Значение входа 2: Код 1 (правильный)

3) Изменить выбор 2 на Элемент 2:

  • Значение выбора 1: Элемент 1 (правильный)
  • Значение входа 1: Код2 (неправильный)
  • Значение выбора 2: Элемент 2 (правильный )
  • Значение входа 2: Код2 (правильный)

Вход 1 должен иметь значение «Код1», но все входы изменяют свои значения на последний измененный выбор.

Вот мой код:

Шаблон: 

<div formArrayName="transporteArrayItems">
        <div *ngFor="let item of transporteForms.controls; let i=index" [formGroupName]="i">

          <div class="form-group row">
            <div class="col-md-9 dropdown-input-inline">
              <mat-form-field appearance="outline">
                <mat-label>Condiciones de entrega</mat-label>
                <mat-select placeholder="Condiciones de entrega" formControlName="selectCondicionesEntrega"
                  (selectionChange)="condicionesEntregaChange($event, i)" required>
                  <mat-option *ngFor="let condicion of listCondiciones" [value]="condicion">
                    {{condicion.descripcion}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="col-md-3">
              <mat-form-field appearance="outline">
                <mat-label>Código</mat-label>
                <input formControlName="condicionesCodigo"
                  [value]="item.controls.selectCondicionesEntrega.value.codigo || null" matInput required disabled>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>

ts: 

 addTransporteItem(index) {


    const transporteItem = this.formBuilder.group({
      selectCondicionesEntrega: ['', Validators.required],
      condicionesCodigo: ['', Validators.required]
    });

    let formularioAnterior = transporteItem;

    if (index != undefined) {

      Object.assign(formularioAnterior, this.transporteForm.controls.transporteArrayItems['controls'][index]);
      this.transporteForms.push(formularioAnterior);
    } else {
      this.transporteForms.push(transporteItem);
    }
  }

Я не уверен, что может быть, потому что я копирую предыдущая группа, но пробовала другие способы и все еще не работала.

Wor Пример короля: https://codesandbox.io/s/determined-satoshi-xpkpf

Заранее спасибо.

...