Angular Материал: выбор нескольких значений по умолчанию для выбора объекта с использованием реактивных форм - PullRequest
Новая
       15

Angular Материал: выбор нескольких значений по умолчанию для выбора объекта с использованием реактивных форм

0 голосов
/ 23 февраля 2020

Я создаю форму, используя реактивные формы и angular Выбор материала с включенным множественным выбором. У меня есть список объектов, которые должны быть загружены в коврик выбора, и я хочу предварительно выбрать некоторые элементы в этом списке по умолчанию.

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

, но элементы, которые я хочу загрузить в выбор мата, являются объектами (energyDrinks в приведенном ниже примере), и когда я устанавливаю значение для поля выбора mat, он не проверяет их по умолчанию, даже если значение поля устанавливается правильно. также, если я добавляю элемент, существующие данные в поле значения переопределяются новыми элементами.

Можно ли как-нибудь проверить предварительно выбранные элементы, отмеченные в поле выбора пользовательского интерфейса, и добавить новые добавленные элементы существующее значение элемента выбора мата?

Заранее спасибо

ниже приведен пример кода -

html - 

<form [formGroup]="drinkCategory">

<mat-form-field class="full-width">
    <mat-select multiple formControlName="sodaName">
        <mat-option *ngFor="let soda of sodaList" [value]="soda">
            {{soda}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('sodaName').value | json}}</p>


<mat-form-field class="full-width">
    <mat-select multiple formControlName="energyDrinkName">
        <mat-option *ngFor="let energyDrink of energyDrinksList" [value]="energyDrink">
            {{energyDrink.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('energyDrinkName').value | json}}</p>
</form>

файл ts - 

import { Component , ViewChild} from '@angular/core';
import { FormBuilder, FormGroup,FormControl,Validators } from '@angular/forms';

@Component({
  selector: 'drink-example',
  styleUrls: ['drink-example.css'],
  templateUrl: 'drink-example.html',
})
export class DrinkExample {
  drinkCategory: FormGroup;

sodaList =['coke','pepsi','sprite'];
selecteSodas =['coke','sprite'];

  energyDrinksList=[{
    id:'1',
    name:'redbull'
  },{
    id:'2',
    name:'monster'
  },{
    id:'3',
    name:'gatorade'
  }];
   selectedEnergyDrinks=[{
      id:'1',
    name:'redbull'
  }];

  constructor(private fb: FormBuilder){}

  ngOnInit() {

        this.drinkCategory = this.fb.group({
            sodaName: [null, Validators.required],
      energyDrinkName:[null, Validators.required]
        });
      this.drinkCategory.get('sodaName').setValue(this.selecteSodas);
      this.drinkCategory.get('energyDrinkName').setValue(this.selectedEnergyDrinks);
    }
}

UI Снимок экрана коврика для выбора элементов

1 Ответ

1 голос
/ 23 февраля 2020

Вам необходимо использовать функцию compareWith для сравнения параметров по идентификатору.

Добавьте функцию к компоненту: 

compareWith(drink1: any, drink2: any): boolean {
 return drink1 && drink2 && drink1.id === drink2.id;
}

и затем установите ее как значение CompareWith на обоих элементах управления MatSelect: 

 <form [formGroup]="drinkCategory">
  <mat-form-field class="full-width">
    <mat-select multiple formControlName="sodaName" [compareWith]="compareWith">
      <mat-option *ngFor="let soda of sodaList" [value]="soda">
        {{ soda }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <p>{{ drinkCategory.get('sodaName').value | json }}</p>

  <mat-form-field class="full-width">
    <mat-select
      multiple
      formControlName="energyDrinkName"
      [compareWith]="compareWith"
    >
      <mat-option
        *ngFor="let energyDrink of energyDrinksList"
        [value]="energyDrink"
      >
        {{ energyDrink.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <p>{{ drinkCategory.get('energyDrinkName').value | json }}</p>
</form>
...