После обновления Angular 18 Ionic 8 связанные свойства поднимают NG01203

Я переношу свой 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()">

Я рад предоставить любую дополнительную информацию; Я в недоумении, как решить эту проблему.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
85
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Подробное объяснение

спасибо, что указали мне правильное направление! Я не осознавал, что проблема в ионной панели поиска. Оказывается, проблема заключалась в том, что я использовал этот компонент только в трех модулях и никогда не добавлял его в импорт/экспорт своего SharedModule. Как только я добавил импорт/экспорт, все заработало правильно.

saschwarz 08.07.2024 05:54

Другие вопросы по теме