Установите Angular mat-select, mat-option, чтобы проверялось ли совпадение данных formControl и текущего элемента в * ngFor - PullRequest
Новая
       7

Установите Angular mat-select, mat-option, чтобы проверялось ли совпадение данных formControl и текущего элемента в * ngFor

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

Я пытаюсь создать форму редактирования пользователя, где я передаю пользовательские данные (через MAT_DIALOG_DATA), и эти данные предварительно заполняют formGroup и formControl s. В моей форме mat-select заполнен списком объектов компании, которые извлекаются из базы данных. Пользовательские данные, которые я передаю через MAT_DIALOG_DATA, имеют свойство companies в свойстве тегов. Свойство companies - это массив, содержащий объекты компании (поскольку у пользователя может быть много компаний), которые имеют ту же сигнатуру / структуру, что и список объектов компании, которые извлекаются из базы данных.

Что я хочу сделать, это предварительно выбрать элементы в mat-select, где есть совпадение в свойстве компаний данных пользователя с данными, которые используются в *ngFor (см. Ниже). Я подумал, что при назначении значения FormControl по умолчанию для переданных пользовательских данных и установке formControl в шаблоне (см. Код) это автоматически установит помеченный / не помеченный ресурс в mat-select, но это не так.

Это мой файл шаблона 

<mat-select formControlName="companies" multiple class="edit-user__form__chip-select">
  <mat-select-trigger>
    <mat-chip-list>
      <mat-chip *ngFor="let company of outputChips('companies')"
                [removable]="true"
                (removed)="onChipRemove('companies', company)">
        {{ company.displayName }}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
  </mat-select-trigger>
  <mat-option *ngFor="let company of companyList" [value]="company">{{company.displayName}}</mat-option> <!-- how to I set this to checked if "company" here is contained within the this.editAccountForm.controls['companies'].value --> 
</mat-select>

, и это код в моем файле Typescript ... 

export class EditAccountComponent implements OnInit {
  user: any;
  editAccountForm: FormGroup;
  companyList: any[] = [];

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

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

  // notice the companies property
  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),
      roles: new FormArray([])
    });
  }

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

  outputChips(control): any {
    return this.editAccountForm.controls[control].value;
  }

  onChipRemove(control: string, value: any): void {
    const index = this.editAccountForm.controls[control].value.findIndex(item => item.id === value.id);
    this.editAccountForm.controls[control].value.splice(index, 1);
    this.editAccountForm.controls[control].setValue(this.editAccountForm.controls[control].value);
  }
}

Я хочу, чтобы опция mat была проверена, если есть сопоставление текущего объекта «компания» с любым объектом в форме управления «компании». То, что я имею выше, не работает, и просто установить имя formControl недостаточно. Кто-нибудь может сказать мне, что мне здесь делать?

Если то, что я написал выше, не имеет смысла, пожалуйста, передайте комментарий, и я перефразирую.

...