Значение патча в массиве формы не устанавливает значение для множественного выбора материала

Question

Я пытаюсь исправить значение массива идентификаторов из Firestore в mat-select с несколькими вариантами. Я перебираю массив и создаю новый элемент управления формы для каждого идентификатора, а затем использую метод push реагирующей формы для добавления в formArray. Примерно так:

patchValueForm(portfolio: any) {
 this.formGroup.patchValue(portfolio);

 for (const id of portfolio.property_ids) {
   const control = new FormControl(id);
   if (!this.property_ids.getRawValue().includes(id)) {
     this.property_ids.push(control);
   }
}
console.log(this.formGroup.getRawValue()); }

Похоже, что это исправляет значение в форме, как показано в журнале консоли:

Проблема, с которой я столкнулся, заключается в том, что он не заполняет предварительно выбранный материал, показанный здесь:

HTML-код, который я использую для этой части,:

 <mat-form-field appearance="outline">
          <mat-select [formArrayName]="'property_ids'" multiple>
            <mat-option *ngFor="let property of properties; let i = index" 
                        (onSelectionChange)="updatePropertyIdArray(property.property_id)" >
              {{property?.address?.first_line_address}}
            </mat-option>
          </mat-select>
          <mat-error>Please select at least one property</mat-error>
        </mat-form-field>

Я искал повсюду в Интернете и пробовал несколько разных методов, но все же не смог заполнить выбор. Кто-нибудь испытывал это раньше?

Answer 1

Я бы просто использовал простой formControl вместо formArray в коврике select. FormControl содержит массив выбора, и вы можете использовать formControlName.

 <mat-form-field appearance="outline">
      <mat-select [formControlName]="'property_ids'" multiple>
        <mat-option *ngFor="let property of properties; let i = index" [value]="property.property_id" 
                    (onSelectionChange)="updatePropertyIdArray(property.property_id)" >
          {{property?.address?.first_line_address}}
        </mat-option>
      </mat-select>
      <mat-error>Please select at least one property</mat-error>
    </mat-form-field>

Вам также необходимо связать значение в опции mat, чтобы выбор работал правильно.