Проверка / Предварительный выбор mat-select, mat-options в форме Angular с использованием [compareWith] - PullRequest
Новая
       12

Проверка / Предварительный выбор mat-select, mat-options в форме Angular с использованием [compareWith]

0 голосов
/ 26 марта 2020

Я думаю, что схожу с ума, и это мой третий вопрос за столько дней ... в любом случае, в моем angular компоненте, который содержится в модальном окне, я передаю данные, используя MAT_DIALOG_DATA. С этими данными я предварительно заполняю formGroup. У меня также есть вызов API в методе loadCompanies, который возвращает массив объектов компании, который я назначаю переменной с именем companyList. Данные, передаваемые контролю компаний в FormGroup, имеют ту же сигнатуру / структуру, что и элементы, содержащиеся в коллекции companyList, вот мой код компонента: 

constructor(public dialogRef: MatDialogRef<EditAccountComponent>,
              @Inject(MAT_DIALOG_DATA) private data,
              private apiService: ApiService,
              private emailUniqueValidator: EmailUniqueValidator) {
    this.user = data;
  }

  ngOnInit(): void {
    this.editAccountForm = this.createEditUserForm();
    this.loadCompanies();
  }

  createEditUserForm(): FormGroup {
    return new FormGroup({
      name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
      email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
      ),
      companies: new FormControl(this.user.tags.company), // this is a collection of objects in an array
      roles: new FormArray([])
    });
  }

  loadCompanies(): void {
    this.apiService.getTags('company', '').subscribe(tags => this.companyList = tags.slice(0, 20));
  }

I w * sh to l oop через элементы в companyList, используя mat-select, где каждый mat-option является одним из элементов в коллекции companyList. Вот так, это мой шаблон кода 

<mat-select
    formControlName="companies"
    multiple
    class="edit-user__form__chip-select"
    [compareWith]="compareFn">
  <mat-option *ngFor="let company of companyList" [value]="company" >{{company.displayName}}</mat-option>
</mat-select>

Теперь "компания" в *ngFor="let company of companyList должна соответствовать одному из объектов, содержащихся в editAccountForm.controls['companies'].value I w * sh, чтобы установить mat-option на «проверено». Я полагаю, что могу сделать это, используя [compareWith] Ввод, который принимает compareFn, чтобы определить, есть ли совпадение ... однако здесь я теряюсь, в compareFn я замечаю, что первый аргумент - первый элемент список компаний, ie. companyList[0] и второй аргумент companyList[i] - текущий элемент ngFor l oop. Однако мне нужно определить, есть ли companyList[i] в моем editAccountForm.controls['companies'].value, поэтому я написал это как мой compareFn

  compareFn(x, y): boolean {
    if (this.editAccountForm.controls['companies']) {
     const match = this.editAccountForm.controls['companies'].value.filter(company => company.id === y.id);
     return match.length > 0;
    }
  }

Теперь это не работает, когда я получаю предупреждение, «TypeError: Невозможно прочитать свойство 'controls' of undefined" , я явно что-то делаю не так ... может кто-то указать в правильном направлении, как я могу проверить параметр mat, если содержится объект l oop по моему editAccountForm.controls['companies'].value

Спасибо за любой совет ... Я действительно схожу с ума от этого. Если я не уверен, пожалуйста, дайте мне знать, и я могу перефразировать этот вопрос.

...