#angular #typescript #primeng #form-control
#angular #typescript #пример #управление формой
Вопрос:
Нужна помощь с p-chips и реактивными формами: у меня есть структура в formgroup, которая построена как элемент базы данных.
valueSeperatedBySemi = "hi; hello; Whoop"
И мне нужно установить это так:
<p-chips formcontrolname="myFormCName" separator=";">
Но это не работает, поскольку p-chips требуется массив. Я не могу перейти valueSeperatedBySemi на массив.
Как мне это исправить?
Ответ №1:
separator свойство используется для замены клавиши ввода по умолчанию для добавления элемента в компонент chips. Так что в вашем случае это не будет полезно.
Я думаю, вам следует установить промежуточную переменную между компонентом и вашими данными. Давайте назовем это values : массив строк.
<p-chips [(ngModel)]="values"></p-chips>
Сначала вам нужно преобразовать входные данные в массив строк, чтобы заполнить компонент chips:
this.valueSeperatedBySemi = "hi; hello; Whoop";
this.values = this.valueSeperatedBySemi.split("; ");
Затем, если вы хотите вернуть свои данные, отформатированные, как в вашей базе данных, вы должны преобразовать их обратно таким образом:
this.valueSeperatedBySemi = this.values.join("; ");
Конечно, вы можете легко адаптировать это с помощью FormControl.
Смотрите демонстрацию
Комментарии:
1. спасибо за быстрый ответ, но решение не работает. я пробовал это ранее, и я получаю сообщение об ошибке в консоли: ngModel нельзя использовать для регистрации элементов управления формами с помощью директивы родительской FormGroup. Попробуйте вместо этого использовать партнерскую директиву FormGroup «formControlName». есть еще идеи?
2. хорошо — я нашел решение самостоятельно — [ngModelOptions]=»{standalone: true}»