Как синхронизировать элемент управления FormArray, который отображает элементы в виде mat-chip внутри одного входа mat-form-field, для отображения сообщений об ошибках?

Question

У меня есть вход 'mat-form-field', на котором я отображаю список mat-chip элементов, которые представляют разные размеры одежды. Фишки могут быть 'L', 'S' и т.д ... В настоящее время я перебираю список всех размеров и показываю их:

`
<mat-chip-list formArrayName="sizes" #chipList [multiple]="true" [selectable]="true">

          <mat-chip #chipRef
            *ngFor="let gearSize of gearItemForm.controls['sizes'].value; let i=index"            
            [selected]="gearSize.size.available"  
            (click)="gearSize.size.available = !gearSize.size.available; onSelectedChipSize()"  
            [color]="gearSize.size.color">{{ sizeEnum[gearSize.size.size] }}  
          </mat-chip>

        </mat-chip-list>

          <input
          matInput
          [formGroupName]="0"
          placeholder="Gear sizes..."
          [matChipInputFor]="chipList"
          style="display: none;"
          class="gear-size-label"
         >
          <span>Is form array sizes invalid: {{gearItemForm.get('sizes').touched}}</span>

        <mat-error *ngIf="gearItemForm.get('sizes').invalid && gearItemForm.get('sizes').touched">Please select a size</mat-error>

      </mat-form-field>
`

Вот как я настраиваю свою форму:

`
this.gearItemForm = this.fb.group({
      name: this.fb.control(name, Validators.required),
      price: this.fb.control(price, Validators.required),
      sizes: this.fb.array(sizesForm, this.requireSize()),
      inStock: this.fb.control(inStock)
})
`

Где sizesForm это:

`
for (let index = 0; index < this.gearSizes.length; index++) {
          sizesForm.push(this.fb.group({
           'size': this.fb.control(sizes[index])
        }))        
      }
`

Моя проблема в том, что у меня есть пользовательский валидатор, который требует от пользователя выбрать размер элемента перед отправкой нового элемента в магазин. Все работает как положено, но я пытаюсь отобразить сообщение об ошибке, если пользователь не выбирает какие-либо размеры. В настоящее время все это работает, потому что я отключаю кнопку отправки формы, если форма недействительна. Если я не выберу какие-либо фишки, то кнопка «Отправить» формы будет отключена. Однако я не могу заставить форму отображать любые ошибки, используя 'mat-error', хотя <mat-error *ngIf="gearItemForm.get('sizes').invalid">Please select a size</mat-error> возвращает значение true, означающее, что оно недействительно.

Answer 1

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

Угловой 2+ материал мат-чип-лист Проверка массива

Проблема заключалась в том, что когда элемент управления 'FormArray' был задан как недействительный, компонент Chip-list не отражал это изменение. Таким образом, сообщения об ошибках не отображались. Вы должны вручную изменить значение errorState компонента mat-chip-list, когда элемент управления формы станет invalid примерно так:

@ViewChild('chipList') chipList: MatChipList;

ngOnInit() {
    this.gearItemForm.get('sizes').statusChanges.subscribe(status => 
          this.chipList.errorState = status === 'INVALID' ? true : false)
}

Тогда в вашем HTML-шаблоне:

<mat-form-field id="sizes">        
        <mat-placeholder class="placeholder">Gear sizes...</mat-placeholder>

        <mat-chip-list formArrayName="sizes" #chipList [multiple]="true" [selectable]="true">

          <mat-chip #chipRef  
            *ngFor="let gearSize of gearItemForm.controls['sizes'].value; let i=index"                    
            [selected]="gearSize.available"  
            (click)="gearSize.available = !gearSize.available; onSelectedChipSize()"  
            [color]="gearSize.color">{{ sizeEnum[gearSize.size] }}  
          </mat-chip>

        </mat-chip-list>

        <mat-error *ngIf="sizes.invalid && sizes.touched">Please select a size</mat-error>
      </mat-form-field>