Я переношу свой Ionic v7 Angular v17 на Ionic v8 и Angular v18. Я решил продолжать использовать NgModules.
Когда я загружаю некоторые маршруты (которые загружают модули с отложенной загрузкой), я получаю сообщение об ошибке в первом связанном свойстве компонента в шаблоне:
app.module.ts:78
Error: NG01203: No value accessor for form control unspecified name attribute. Find more at https://angular.dev/errors/NG01203
at _throwMissingValueAccessorError (forms.mjs:3213:11)
at setUpControl (forms.mjs:2986:13)
at NgModel._setUpStandalone (forms.mjs:4088:9)
at NgModel._setUpControl (forms.mjs:4076:37)
at NgModel.ngOnChanges (forms.mjs:4035:18)
at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:4110:14)
at callHookInternal (core.mjs:5150:14)
at callHook (core.mjs:5181:9)
at callHooks (core.mjs:5131:17)
at executeInitAndCheckHooks (core.mjs:5081:9)
at selectIndexInternal (core.mjs:11373:17)
at Module.ɵɵadvance (core.mjs:11356:5)
at LayoutListPage_Template (layout-list.page.html:28:9)
at executeTemplate (core.mjs:11620:9)
at refreshView (core.mjs:13238:13)
at detectChangesInView (core.mjs:13454:9)
at detectChangesInViewIfAttached (core.mjs:13414:5)
at detectChangesInComponent (core.mjs:13403:5)
at detectChangesInChildComponents (core.mjs:13467:9)
at refreshView (core.mjs:13292:13)
...
Когда я устанавливаю точку останова в _throwMissingValueAccessorError
, трассировка стека показывает, что эта ошибка находится в первом связанном свойстве (во втором компоненте ion-button
:
<ion-header>
<ion-toolbar>
<ion-buttons slot = "start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title
><span class = "title" [ngClass] = "{ searching: searching }">Layouts</span>
<ion-searchbar
#search
[(ngModel)] = "queryText"
[ngClass] = "{ searching: searching }"
color = "light"
(ionChange) = "updateLayouts()"
placeholder = "Search"
type = "search"
>
</ion-searchbar
></ion-title>
<ion-buttons slot = "end">
<ion-button class = "search-icon" (click) = "toggleSearch()" title = "Search">
</ion-button>
<ion-button
<!-- *** The error is on the [fill] bound property *** -->
[fill] = "filteringFill"
[color] = "filteringColor"
(click) = "presentFilter()"
title = "Filter Layouts"
>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div class = "index-list" [hidden] = "!layoutsVisible()">
<app-layout-list-item
class = "index-list__item"
*ngFor = "let layout of layouts"
[layout] = "layout"
[favorite] = "favorite(layout)"
[includedTagNames] = "includedTagNames"
[favoritesOnly] = "favoritesOnly"
(tagFilter) = "filterByTag($event)"
(favoriteFilter) = "filterFavoritesOnly()"
>
<ion-grid class = "ion-no-padding">
<ion-row class = "ion-text-nowrap actions">
<ion-col size = "4">
<ion-button
expand = "block"
(click) = "viewLayout(layout)"
data-cy = "view"
>
<fa-icon slot = "start" [icon] = "['fad', 'eye']" size = "lg"></fa-icon>
<label>View</label>
</ion-button>
</ion-col>
<ion-col size = " 4">
<ion-button
expand = "block"
(click) = "editLayout(layout)"
[disabled] = "disableEdit()"
>
<fa-icon
slot = "start"
[icon] = "['fad', 'edit']"
size = "lg"
></fa-icon>
<label>Edit</label>
</ion-button>
</ion-col>
<ion-col size = "4">
<ion-button expand = "block" data-cy = "more" (click) = "more(layout)">
<fa-icon [icon] = "['fad', 'ellipsis-h']" size = "lg"></fa-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</app-layout-list-item>
</div>
Я импортировал все компоненты Ionic в общий модуль NgModule, который импортируется в этот модуль. Я также явно импортировал IonButton
в этот модуль, и результат тот же.
Если я удалю связанные свойства fill
и color
, ошибка переместится дальше по файлу до этой строки:
<div class = "index-list" [hidden] = "!layoutsVisible()">
Я рад предоставить любую дополнительную информацию; Я в недоумении, как решить эту проблему.
Сначала попробуйте добавить в поиск свойства name
и id
.
Наконец, попробуйте добавить [ngDefaultControl]
, это может исправить ситуацию.
<ion-searchbar
id = "queryText"
name = "queryText"
#search
[(ngModel)] = "queryText"
[ngClass] = "{ searching: searching }"
color = "light"
(ionChange) = "updateLayouts()"
placeholder = "Search"
type = "search"
>
</ion-searchbar>
спасибо, что указали мне правильное направление! Я не осознавал, что проблема в ионной панели поиска. Оказывается, проблема заключалась в том, что я использовал этот компонент только в трех модулях и никогда не добавлял его в импорт/экспорт своего SharedModule. Как только я добавил импорт/экспорт, все заработало правильно.