Angular Reactive Form - подпишитесь на экземпляры Form Control в массиве форм, чтобы получить общую ценность

Я использую Angular Reactive Forms для итерации по массиву значений. Я хотел бы иметь полное поле после массива форм, которое обновляется при изменении значений элемента управления Form Array.

Образец данных:

  primaryData = {
    products: [
      {
        name: 'test-product',
        unmoved: 21,
        moved: 18 
      },
      {
        name: 'another-product',
        unmoved: 18,
        moved: 42
      }
    ]
  }

Я создаю элементы управления реактивной формы и массив следующим образом:

  setPrimaryQuantities() {
    const control = <FormArray>this.primaryForm.controls.quantities;
    this.primaryData.products.forEach(product =>
      control.push(this.fb.group({
        name: [product.name, Validators.required],
        unmoved: [product.unmoved, Validators.required],
        moved: [product.moved, Validators.required]
      }))
    )
  }

  ngOnInit() {
    this.primaryForm = this.fb.group({
      quantities: this.fb.array([]),
      unmovedTotal: '',
      movedTotal: ''
    })
    this.setPrimaryQuantities();
  }

Как лучше всего обновить мои unmovedTotal и movedTotal Controls на основе изменений в элементах управления Array. Вот StackBlitz, демонстрирующий мою структуру.


typescript angular subscription angular-reactive-forms formarray
person JordanBarber    schedule 21.05.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

На мой взгляд, итоговые суммы, которые вы ищете, не должны быть в форме. Он отключен без каких-либо условий в вашем TypeScript, и я не могу придумать вариант использования, в котором вы бы напрямую редактировали итоги. Это просто вычисленное значение вне формы.

Тем не менее, неплохо было бы иметь наблюдаемое типа:

total$: Observable<{ moved: number, unmoved: number }>

Для этого, поскольку вы использовали реактивную форму, это довольно просто :)

this.total$ = this.primaryForm.valueChanges.pipe(
  startWith(this.primaryForm.value),
  map(f => f.quantities.reduce(
    (acc, q) =>
    ({
      moved: acc.moved + q.moved,
      unmoved: acc.unmoved + q.unmoved
    }),
    { moved: 0, unmoved: 0 }
  ))
);

Каждый раз, когда форма меняется, вы хотите получать новые итоги. Если вы хотите получить новое значение (итоги) из начального (значения формы), используйте оператор map.

В форме мы хотим перебрать количества и получить сумму для свойств moved и unmoved. Итак, здесь мы не можем использовать map (базовую карту JS, а не карту из RXJS), потому что она создаст массив. Для этого мы можем использовать reduce (снова из чистого JS, здесь нет RXJS).

Теперь, когда у нас есть наблюдаемый объект, нам просто нужно использовать его в представлении. Чтобы избежать двух подписок, мы можем использовать ngIf с синтаксисом as:

<tr *ngIf="total$ | async as total">
  <td>Totals</td>
  <td>{{ total.unmoved }}</td>
  <td>{{ total.moved }}</td>
</tr>

Вот полный пример, основанный на вашем первоначальном примере Stackblitz:

https://stackblitz.com/edit/angular-kbk3zm?file=src%2Fapp%2Fapp.component.ts

person maxime1992    schedule 21.05.2018