Моделирование WPF DataGrid

Пожалуйста, взгляните на этот стек-блиц-угловая форма-группа-массив . Упрощенный пример formArray.

Так что в моем примере это будет:

form: FormGroup = this.fb.group({
  tops: this.fb.array([])
}, {
  validator: this.exampleValidator
});

exampleValidator(e) {
  //does logic for validity on form
  console.log(e);
}

export class SelectMultipleExample implements OnInit {


  form: FormGroup = this.fb.group({
    tops: this.fb.array([])
  });

  toppingList = [{
      id: 0,
      name: 'Extra cheese'
    },
    {
      id: 0,
      name: 'Mushroom'
    },
    {
      id: 0,
      name: 'Onion'
    },
    {
      id: 0,
      name: 'Pepperoni'
    },
    {
      id: 0,
      name: 'Sausage'
    },
    {
      id: 0,
      name: 'Tomato'
    }
  ];

  complexOrderToppings = [{
      order: {
        selected: [{
            id: 0,
            name: "Extra cheese"
          },
          {
            id: 0,
            name: "Mushroom"
          },
          {
            id: 0,
            name: "Onion"
          },
          {
            id: 0,
            name: "Pepperoni"
          }
        ]
      }
    },
    {
      order: {
        selected: [{
            id: 0,
            name: "Extra cheese"
          },
          {
            id: 0,
            name: "Mushroom"
          },
          {
            id: 0,
            name: "Onion"
          },
          {
            id: 0,
            name: "Pepperoni"
          }
        ]
      }
    },
    {
      order: {
        selected: [{
            id: 0,
            name: "Extra cheese"
          },
          {
            id: 0,
            name: "Mushroom"
          },
          {
            id: 0,
            name: "Onion"
          },
          {
            id: 0,
            name: "Pepperoni"
          }
        ]
      }
    }
  ];

  simpleOrderToppings = [{
      order: [{
          id: 0,
          name: "Extra cheese"
        },
        {
          id: 0,
          name: "Mushroom"
        },
        {
          id: 0,
          name: "Onion"
        },
        {
          id: 0,
          name: "Pepperoni"
        }
      ]
    },
    {
      order: [{
          id: 0,
          name: "Extra cheese"
        },
        {
          id: 0,
          name: "Mushroom"
        },
        {
          id: 0,
          name: "Onion"
        },
        {
          id: 0,
          name: "Pepperoni"
        }
      ]
    },
    {
      order: [{
          id: 0,
          name: "Extra cheese"
        },
        {
          id: 0,
          name: "Mushroom"
        },
        {
          id: 0,
          name: "Onion"
        },
        {
          id: 0,
          name: "Pepperoni"
        }
      ]
    }
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.setToppings(this.complexOrderToppings);
  }

  get getTops(): FormArray {
    return this.form.get('tops') as FormArray;
  }

  setToppings(toppings: any) {
    const toppingsFGs = toppings.map(topping => this.fb.group(topping));
    const topppingFormArray = this.fb.array(toppingsFGs);
    this.form.setControl('tops', topppingFormArray);
    this.setTopsNewValue();
  }

  compareSelected(o1: any, o2: any): boolean {
    if (!o1 || !o2) {
      return false;
    }
    const isSelected = o1.name === o2.name && o1.id === o2.id;
    return isSelected;
  }

  setTopsNewValue() {
    const tops = this.getTops;
    tops.controls.map(t => {
      const newValue = t.value.order.selected;
      t.setValue({
        order: newValue
      });
    });
  }
}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

  

    

      
        
          
            {{topping.name}}
          
        
      
    
  


{{form.value | json}}