Angular FormControl, patchValue и список выбора мата

Все, что я хочу на данный момент, это иметь форму с mat-selection-list.

Это код.

.html

<form [formGroup]="aForm">
 <mat-selection-list #id matInput #idInput formControlName="id" style="width: 20%">
        <mat-list-option #matOption *ngFor="let option of Options" [value]="option"
          (click)="$event.stopPropagation(); changeSelectedOption(matOption.value)" checkboxPosition="before">
          {{ option }}
        </mat-list-option>
      </mat-selection-list>
</form>

.ts

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormControl, FormGroup, FormGroupDirective } from '@angular/forms';

...

export class AComponent implements OnInit {
aForm: FormGroup;

Options: string[] = ['exclude', 'include', 'excludeDateTtime']

constructor(
    private formBuilder: FormBuilder,
  ) {

    this.aForm = this.formBuilder.group({
      fc: new FormControl({ value: 'exclude', disabled: false }),
    });
   }

  ngOnInit(): void {
  }

  changeSelectedOption(option: any) {

    this.aForm.controls['fc'].patchValue('exclude');
  }

}

Проблема 1: инициализация formControl

В строке fc: new FormControl({ value: 'exclude', disabled: false }),, если я указываю значение, отличное от '', выдается ошибка ERROR TypeError: t._value.some is not a function.

Проблема 2: обновление значения formControl

Из соображений внешнего вида я использую mat-selection-list с [multiple]="true" и пытаюсь переопределить множественный выбор с функцией changeSelectedOption, чтобы в конце можно было выбрать только один вариант.

В строке this.aForm.controls['fc'].patchValue('exclude'); установка значения 'exclude' вызывает ошибку ERROR TypeError: t.forEach is not a function.

Что означают эти ошибки? Что я могу сделать, чтобы решить их?

Спасибо.


person vpap    schedule 17.06.2021    source источник


Ответы (1)


Как сказано в некоторых других связанных вопросах в StackOverflow, для работы formControl.patchValue() переданный аргумент должен иметь ожидаемый тип данных.

Проблемные строки, о которых я упоминал выше, например. fc: new FormControl({ value: 'exclude', disabled: false }), показать аргументы с типом данных string, то есть 'exclude'.

Однако для mat-selection-list ожидаемым типом данных будет Array независимо от того, укажете ли вы [multiple]="true" или [multiple]="false". Я полагаю, то же самое справедливо и для всех других списков Angular-Material.

Следовательно, правильный путь - это

fc: new FormControl({ value: ['exclude'], disabled: false }),

а также

this.aForm.controls['fc'].patchValue(['exclude']);

Учитывая возможность, используя '' в fc: new FormControl({ value: '', disabled: false }),

это не означает, что тип данных string. Иными словами, '' — это не пустая строка, подразумевающая, таким образом, тип данных string. Кажется, это больше работает как объект any или для обозначения объекта типа any.

person vpap    schedule 18.06.2021