barker/bookie/src/app/sales/discount/discount.component.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Observable } from 'rxjs';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DiscountDataSource } from './discount-datasource';

@Component({
  selector: 'app-modifiers',
  templateUrl: './discount.component.html',
  styleUrls: ['./discount.component.css']
})
export class DiscountComponent {
  list: any[];
  form: FormGroup;
  dataSource: DiscountDataSource;

  displayedColumns = ['name', 'discount'];

  constructor(
    public dialogRef: MatDialogRef<DiscountComponent>,
    private fb: FormBuilder,
    @Inject(MAT_DIALOG_DATA) public data: Observable<any[]>
  ) {
    this.createForm();
    this.data.subscribe((list: any[]) => {
      this.list = list;
        this.form.setControl('discounts', this.fb.array(
          this.list.map(
            x => this.fb.group({
              name: [x.name],
              discount: ['', [Validators.min(0), Validators.max(100)]]
            })
          )
        ));
      this.dataSource = new DiscountDataSource(list);
    });
  }

  createForm() {
    this.form = this.fb.group({
      discounts: ''
    });
  }

  accept(): void {
    const array = this.form.get('discounts') as FormArray;
    this.list.forEach((item, index) => {
      item.discount = Math.max(Math.min(array.controls[index].value.discount, 100), 0);
    });
    this.dialogRef.close(this.list);
  }
}