I'm migrating my Ionic v7 Angular v17 to Ionic v8 and Angular v18. I've chosen to continue to use NgModules.
When I load some routes (which lazy load modules) I'm getting an error on the first bound property of a component in the template:
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)
...
When I set a breakpoint in _throwMissingValueAccessorError the stack trace shows this error is on the first bound property (in the 2nd ion-button component:
<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>
I've imported all the Ionic components into a Shared NgModule that is imported into this module. I've also explicitly imported IonButton into this module and the result is the same.
If I remove the bound fill and color properties, the error moves further down the file to this line:
<div class="index-list" [hidden]="!layoutsVisible()">
I'm happy to provide any more information; I'm at a loss as to how to resolve this issue.
First try adding a name and id property to the search.
Finally, try adding [ngDefaultControl] which might fix it.
<ion-searchbar
id="queryText"
name="queryText"
#search
[(ngModel)]="queryText"
[ngClass]="{ searching: searching }"
color="light"
(ionChange)="updateLayouts()"
placeholder="Search"
type="search"
>
</ion-searchbar>