Kendo UI ComboBox для Angular: как предотвратить ожидаемое значение ошибки типа объекта?

Я пытаюсь сделать так, чтобы Kendo ComboBox для Angular не вылетал с ошибкой Prevent Expected value of type Object:

<kendo-combobox
    formControlName="gender"
    [data]="genders"
    [textField]="'text'"
    [valueField]="'value'"
    [valuePrimitive]="false"
    [filterable]="true"
    [allowCustom]="true"
    required
>
</kendo-combobox>

StackBlitz

Ошибка может быть получена, если удалить значение и нажать Tab (комбо-блюр). На самом деле, если оставить в поле недопустимое значение, произойдет эта ошибка.

Ниже я объясню, почему я использую некоторые настройки:

  • textField и valueField — в моем приложении я запрашиваю сложные объекты, и выбранное значение будет предоставлять некоторую информацию другим полям формы.
  • [valuePrimitive]="false" - выбранное значение является сложным объектом
  • [allowCustom]="false" — я использовал это, чтобы позволить элементу управления получить начальное значение, которого нет в списке. В моем приложении я использую фильтрацию на стороне сервера с пустым начальным списком.

При использовании в приложении (фильтрация на стороне сервера) я также получаю эту ошибку при нажатии кнопки со стрелкой, но я могу избавиться от этого, либо убедившись, что начальное значение находится в списке значений (уродливо), либо просто удалив кнопку .

Любая идея о том, как заставить это работать?


kendo-ui kendo-ui-angular2 kendo-combobox
person Alexei - check Codidact    schedule 22.09.2020    source источник
comment
Как я могу воспроизвести ошибку в stackblitz? Я удалил выделенное значение и нажал Tab, но вроде все нормально...   -  person Giannis    schedule 23.09.2020
comment
@Giannis Я только что понял, что оставил allowCustom=false, и значение по умолчанию не отображается. Это должно быть правдой. Я не могу изменить его прямо сейчас (мобильный), но я поменяю его, как только доберусь до ноутбука.   -  person Alexei - check Codidact    schedule 23.09.2020

Ответы (2)


arrow_upward
1
arrow_downward

Согласно интерфейсу кендо для Angular вы должны использовать функцию valueNormalizer для преобразования того, что пользователь на самом деле вводит, в действительный объект.

public valueNormalizer = (text: Observable<string>) => text.pipe(map((text: string) => {
    return {
        value: this.genders[this.genders.length - 1].value + 1, //whatever value
        text: text
    };
}));

Пожалуйста, проверьте обновленный Stackblitz и позвольте мне знать, если это полезно.

person Giannis    schedule 23.09.2020
comment
Я просто пропустил эту часть документации, и это имеет смысл. Спасибо. - person Alexei - check Codidact; 24.09.2020

arrow_upward
1
arrow_downward

valueNormalizer у меня вообще не работал.

Я выбрал другое решение (я не могу опубликовать код здесь из-за ограничений безопасности в моей компании).

Мы хотим разрешить начальное значение и должны разрешить [allowCustomer]="true", потому что это начальное значение изначально не является частью массива [data], так как мы получаем его с сервера.

Я просто поместил начальное значение в массив [data], и это исправило ситуацию. не надо [allowCustome]="true"

person TomerAgmon1    schedule 19.11.2020
comment
Для меня предложенное решение сработало, но я также пробовал это, и оно действительно. Просто это звучит хакерски, поэтому я подумал о том, чтобы получить лучший ответ. - person Alexei - check Codidact; 19.11.2020
comment
Я не думаю, что это хаки. Это просто ввод значения по умолчанию в список. Этот нормализатор значений принимает простое решение и усложняет его (по крайней мере, для этого сценария). Вместо того, чтобы позаботиться об этом значении по умолчанию один раз, нормализатор значений вызывается для каждого выбора и повторно фильтрует результаты. - person TomerAgmon1; 19.11.2020