Angular - Невозможно заполнить список mat-chip списком и * ngFor - Обновлено: Задать значение mat-select множественное число - это проблема? - PullRequest
Новая
       1

Angular - Невозможно заполнить список mat-chip списком и * ngFor - Обновлено: Задать значение mat-select множественное число - это проблема?

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

У меня проблема с заполнением mat-chip-list. В моем angular компоненте, который содержится в модальном окне, я передаю данные, используя MAT_DIALOG_DATA. Это выглядит так: 

{
  name: 'string',
  email: 'string',
  tags: {
    company: [{displayName: 'string', id: ''}, ...] // can contain many or no items
  }
}

Я передаю это компоненту и присваиваю свойству companies значение FormControl, когда создаю FormGroup для компонента (см. Код ниже). Затем я использую метод для возврата значения FormControl, чтобы я мог l oop через содержимое, чтобы получить mat-chip-list, вот мой код шаблона: 

<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>
</mat-select>

вот мой файл кода ( я включил только соответствующие части): 

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 returns a collection [{}, {}] where the objects have the same structure / signature
    // as the items contained with in the this.user.tags.company collection
    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),
      roles: new FormArray([])
    });
  }

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

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

Теперь моя проблема в том, что mat-chip-list не заполняется, однако, если я использую тот же код (*ngFor) с <div> он выведет правильные данные. Я уверен, что это возможно, потому что я использую FormControl для определения свойства / контроля компаний FormGroup. Поэтому я изменил это на FormArray и отформатировал this.user.tags.company в FormArray, например, так ... 

createEditUserForm(): FormGroup {
    let formComps: FormArray;

    if (this.user.tags && this.user.tags.company) {
      formComps = new FormArray([...this.user.tags.company.map(item => new FormControl(item))]);
    }

    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 FormArray(formComps),
      roles: new FormArray([])
    });
  }

Однако это приводит к ошибке "EditAccountComponent. html : 38 ОШИБКА TypeError: Невозможно прочитать свойство 'controls' из undefined ", поэтому при использовании FormArray я не могу привязаться к шаблону. У меня действительно есть проблема, пытаясь определить, что я должен сделать, чтобы сделать эту работу. В настоящее время я просматриваю Stackoverflow, чтобы найти ответы, но если кто-нибудь сможет объяснить, где я ошибаюсь и что мне следует сделать, чтобы решить мою проблему, я был бы очень признателен. Если я плохо сформулировал этот вопрос, пожалуйста, прокомментируйте, и я перепишу и уточню.

** Обновление **

Я начинаю думать, что проблема не в мат-чипе. список, но тот факт, что companies: new FormControl(this.user.tags.company) может быть не правильно инициализирован, например, это может быть проблемой с установкой значения или выбором циновки с несколькими значениями, используя formControlName, а не ngModal?

1 Ответ

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

Если вы хотите перебрать массив форм в вашем HTML, вам сначала нужно указать formArrayName , а затем перебрать все элементы управления. В вашем случае это должно выглядеть примерно так. 

<mat-select formArrayName="companies" multiple class="edit-user__form__chip-select">
  <mat-select-trigger>
    <mat-chip-list>
      <mat-chip *ngFor="let company of companies.controls"
                [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>
</mat-select>

Но я не уверен, что ваша ошибка не указывает на какую-то другую проблему.

...