ERROR TypeError: this.validator is not a function FormArray

Question

I have an error that only happens when the control is inside a formArray, I have a mat-select to select the days of the week, and it is because of this control that I get the following error.

What am I doing wrong to cause this error to occur?

vendor.js:65387 ERROR TypeError: this.validator is not a function
    at FormControl._runValidator (vendor.js:106921)
    at FormControl.updateValueAndValidity (vendor.js:106882)
    at new FormControl (vendor.js:107326)
    at FormBuilder.control (vendor.js:111089)
    at FormBuilder._createControl (vendor.js:111149)
    at vendor.js:111128
    at Array.forEach (<anonymous>)
    at FormBuilder._reduceControls (vendor.js:111123)
    at FormBuilder.group (vendor.js:111041)
    at :4200/admin-admin-module.js:7871

The return that comes within the object element that is in the professionals.forEach is;

  element: {
        daysService: [2, 3],
        endService: "",
        id: "45ySYbmImayrgv7teqWr",
        startService: "",
        name: "Name professional",
        rooms: [],
    };

form.component.ts:

  this.weekDays = [
    { label: 'Sunday', value: 0 },
    { label: 'Monday', value: 1 },
    { label: 'Tuesday', value: 2 },
    { label: 'Wednesday', value: 3 },
    { label: 'Thursday', value: 4 },
    { label: 'Friday', value: 5 },
    { label: 'Saturday', value: 6 },
  ];

this.professionals
  .pipe(takeUntil(this._unsubscribeAll))
  .subscribe(professionals => {
    if (!professionals) return;
    this.setProfessionalsUnity(professionals);
  });



 private _buildForm(): void {
    this.form = this._formBuilder.group({
      professionals: this._formBuilder.array([])
    });
  }

  get professionalsArray() {
    return <FormArray>this.form.get('professionals');
  }

  public setProfessionalsUnity(professionals): void {
    this.professionalsArray.clear();
    let control = this.professionalsArray;
    if (!professionals) return;
    professionals.forEach(element => {
      // I believe the error is happening because of this line ...
      control.push(this._formBuilder.group(element));
    });
  }

 public addGroupProfessional() {
    return this._formBuilder.group({
      id: [''],
      name: [''],
      rooms: [''],
      daysService: [''],
      startService: [''],
      endService: ['']
    });
  }

form.html:

<form [formGroup]="form">

  <mat-accordion formArrayName="professionals">
    <mat-expansion-panel *ngFor="let group of professionalArray.controls; let i = index" [formGroupName]="i"
      [expanded]="indexExpanded == i && newProfessional">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <mat-icon class="secondary-text mr-12">person</mat-icon>
          {{ group.get('name').value }}
        </mat-panel-title>
        <mat-panel-description>
        </mat-panel-description>
      </mat-expansion-panel-header>

      <div fxLayout="row" fxLayoutAlign="start">
        <mat-form-field fxFlex="50">
          <input matInput placeholder="Name of professional..." formControlName="name">
        </mat-form-field>
      </div>

      <div class="h3 blue-fg mb-12">Attendance</div>

      <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start">
        <mat-form-field fxFlex="50">
          <mat-select placeholder="Days you attend" formControlName="daysService" multiple>
            <mat-option *ngFor="let day of weekDays" [value]="day.value">{{day.label}}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <mat-action-row>
        <button mat-button color="warn" (click)="removeProfessional(i)" *ngIf="group.value.id">Delete</button>
        <button mat-button color="accent" [disabled]="group.value.name.length < 5" *ngIf="group.value.id"
          (click)="updateProfessional(i)">Save</button>
        <button mat-button color="accent" [disabled]="group.value.name.length < 5" *ngIf="!group.value.id"
          (click)="addProfessional(i)">Add</button>
      </mat-action-row>
    </mat-expansion-panel>
  </mat-accordion>

</form>

Answer 1

You need to wrap the arrays. For existing objects you can do it like this:

// @ts-ignore 
entity.property= [entity.property];
fb.group(entity)

Answer 2

Try it using this way:

    daysService: [[2, 3]]