Таблица материалов с формой материала (с использованием ползунка материала) не работает

Question

Я пытаюсь добавить таблицу материалов, где все строки таблицы материалов можно обновить за один раз (одна общая кнопка сохранения)

Для этого я попытался использовать FormArray для хранения всех данныхтаблицы, а затем я бы отправил обратно массив данных на сервер для обновления.

Но я не могу заставить работать слайдер материала / FormArray.

HTML-код какследует

<form [formGroup]="legalStructureForm" >
  <ng-container formArrayName="legalStructureRatingScoreArray" >
    <mat-table [dataSource]="legalStructureResults" class="mat-elevation-z8">

     <mat-header-row *matHeaderRowDef="legalStructureColumns"></mat-header-row>
     <mat-row *matRowDef="let row; let index = index; columns: legalStructureColumns;" [formGroupName]="index"></mat-row>

     <!-- Name Column -->
     <ng-container matColumnDef="legalStructure">
      <mat-header-cell *matHeaderCellDef> {{l('LegalStructure')}} </mat-header-cell>
      <mat-cell *matCellDef="let record"> {{record.legalStructure.name}} </mat-cell>
     </ng-container>

     <!-- Icon Column -->
     <ng-container matColumnDef="ratingScore">
      <mat-header-cell *matHeaderCellDef> {{l('RatingScore')}} </mat-header-cell>
      <mat-cell *matCellDef="let record"> {{record.ratingScore}} </mat-cell>
     </ng-container>

     <!-- Actions -->
     <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let record; let index = index" [formGroupName]="index">
      <mat-slider formControlName="ratingScore" [value]="record.ratingScore" min="1" max="5" step="1"></mat-slider>
      </mat-cell>
     </ng-container>

    </mat-table>
   </ng-container>
  </form>

Компонент выглядит следующим образом:

    @ViewChild('dataTable') dataTable: Table;
     public legalStructureColumns = ['legalStructure', 'ratingScore', 'actions'];
     public legalStructureResults = new MatTableDataSource();

    // public legalStructureRatingScoreArray: FormArray;
    public legalStructureForm: FormGroup;

    constructor(injector: Injector, public legalStructuresService: LegalStructuresService, private formBuilder: FormBuilder) {
    super(injector);
  }

    ngOnInit() {
      this.legalStructureForm = this.formBuilder.group({
        legalStructureRatingScoreArray: this.formBuilder.array([])
    });

    this.legalStructureRatingScoreArray.push(this.formBuilder.group({
      ratingScore: new FormControl('', [ Validators.required]),
    }));
   }

    get legalStructureRatingScoreArray() {
      return this.legalStructureForm.get('legalStructureRatingScoreArray') as FormArray;
  }

    ngAfterViewInit() {

    this.getLegalStructures();

    // console.log(this.legalStructureForm);
  }

    public getLegalStructures(): void {
      this.legalStructuresService.getLegalStructureRatingScores()
      .subscribe(result => {
        this.legalStructureResults.data = result.items;
        result.items.forEach((obj) => {
          this.legalStructureRatingScoreArray.push(this.formBuilder.group({
          ratingScore: obj.ratingScore
        }));
      });
    });
  }