Как показать выбранный параметр, если значения formControlName не соответствуют значению параметра?
У меня есть раскрывающийся список материалов, который заполняет список имен клиентов. Все работает, но только сейчас при тестировании обнаружил ошибку.
Ошибка может показаться небольшой, но она сильно повлияет на процесс. Поясню ситуацию: Существует информационная панель клиента (в панели администратора), где я делаю CRUD для имен клиентов. Оттуда через API поступает массив имен, который заполняет раскрывающийся список.
При отправке формы имя отправляется как XYZ, затем после этого, если я удаляю это имя со стороны администратора и просматриваю форму, имя не отображается в раскрывающемся списке, что вполне естественно, но имя остается в formControlName .
Теперь вот сценарий, который мне нужен, чтобы показать данные formControlName в раскрывающемся списке как выбранные, даже если данные отсутствуют в параметре (работает нормально, когда данные присутствуют в значении параметра).
Вот мой текущий код:
<mat-form-field appearance = "outline">
<mat-label>Customer Name</mat-label>
<mat-select formControlName = "customerName" (selectionChange) = "custData($event)">
<mat-option *ngFor = "let customer of customerNames" [value] = "customer.customerName">
{{customer.customerName}}
</mat-option>
</mat-select>
<mat-error>Customer Name Required</mat-error>
</mat-form-field>
Какое дополнительное условие нужно выполнить, чтобы решить сценарий?
Это выпуск пример для того же.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку вы получаете данные с сервера, а также хотите показать выбранное имя после удаления параметров. В этой ситуации вы можете использовать mat-autocomplete.
Я обновил ваш код для примера
Или
вы можете использовать ввод только для чтения, чтобы показать formControlName. После выбора вам нужно скрыть поле выбора и связать данные с полем ввода. Кроме того, добавьте событие щелчка в поле ввода, чтобы скрыть ввод и показать выбор.
Ссылка на пример обновлена. Пожалуйста, ознакомьтесь с material.angular.io/components/autocomplete/overview для получения дополнительной информации.
просто добавьте новую опцию
<select formControlName = "option">
<option *ngIf = "optionList.indexOf(form.get('option').value)<0"
hidden [value] = "form.get('option').value">
{{form.get('option').value}}</option>
<option *ngFor = "let opt of optionList" [value] = "opt">{{opt}}</option>
</select>
Я добавил "скрытый", чтобы его нельзя было выбрать
Обновлено, если у нас есть сложные параметры, возможно, нам нужно использовать вспомогательный геттер (в этом случае я использую непосредственно FormControl, техника такая же, если используется FormGroup, только помните, что мы должны использовать myForm.get('nameOfControl')
get includeValue()
{
return this.foods.map(x=>x.value).indexOf(this.control.value)<0
}
<mat-form-field appearance = "fill">
<mat-label>Favorite food</mat-label>
<mat-select [formControl] = "control">
<mat-option *ngIf = "includeValue" style = "display:none" [value] = "control.value">{{control.value}}</mat-option>
<mat-option *ngFor = "let food of foods" [value] = "food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
Смотрите stackblitz
этот 1 нормально работает, но не в мат-выборе 😥 можете подсказать почему
Я обновил ответ, используя мат-выбор и массив объектов. Я предполагаю, что проблема, которую вы обнаружили, заключается в том, что она не отображается или вы используете массив объектов.
так как вы выполнили это обычное управление формой, все в порядке, но возникает проблема, что при использовании formControlName вместо [formControl] возникает эта ошибка: TypeError: this.form.get(...) is null. И я понял, что это потому, что formControlName не находится внутри квадратной скобки, я думаю, но также formControlName не может быть внутри квадратной скобки 😥. Поэтому любое решение, которое вы можете предоставить для этого
Я обновил stackblitz, чтобы добавить второй случай с FormGroup. Обратите внимание, что вы меняете функцию includeValue - formGroup использует функцию includeValueInGroup-. В последнем случае используется простой массив строк, функция includeValue отсутствует.
да, теперь работает, но у меня есть вопрос, почему нам нужно писать так, а не нормально form.get('foo').value 🤔
если ваша переменная formGroup называется form, а ваш элемент управления называется foo, вы пишете form.get('foo').value. в примере форма называется form2, а элемент управления control, но это одно и то же. Действительно, из Angular 9 тоже можно написать form.value.foo, но из-за небольшой личной мании я обычно использую get
@Eliseo, у меня есть один вопрос относительно таблицы угловых материалов, не могли бы вы помочь здесь. stackoverflow.com/questions/65347251/…
Ссылка на пример не работает, обновите пожалуйста