Angular 18 Ionic 8升级后绑定属性提升NG01203

Question

我正在将 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 中，该共享 NgModule 也导入到该模块中。我还明确地将

IonButton

导入到此模块中，结果是相同的。

如果我删除绑定的

fill

和

color

属性，错误将进一步向下移动到文件中的这一行：

  <div class="index-list" [hidden]="!layoutsVisible()">

我很乐意提供更多信息；我不知道如何解决这个问题。

Answer 1

首先尝试在搜索中添加

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>

详细解释