Angular Ngrx-Forms 异步管道无法找到错误

Question

我想使用 ngrx-forms 库管理表单的状态； 所以以下文档： https://ngrx-forms.readthedocs.io/en/master/

我有一个减速机：

import { Action, createReducer } from '@ngrx/store';
import {
  FormGroupState,
  createFormGroupState,
  formGroupReducer,
  onNgrxForms,
} from 'ngrx-forms';
import { Gender } from '../../core/enums/gender_enum';

// 1. Definicja modelu danych formularza
export interface PatientFormValue {
  name: string;
  last_name: string;
  age: number;
  gender: Gender;
}
// 2. Początkowy stan formularza
const FORM_ID = 'PatientFormValue';
const initialFormState = createFormGroupState<PatientFormValue>(FORM_ID, {
  name: '',
  last_name: '',
  age: 0,
  gender: Gender.nie_podawać,
});

// 3. Definicja stanu aplikacji
export interface PatientDataState {
  someOtherField: string;
  myForm: FormGroupState<PatientFormValue>;
}

const initialState: PatientDataState = {
  someOtherField: '',
  myForm: initialFormState,
};

// 4. Reducer zwiazany a formularzem
export function patientFormReducer(
  state = initialState,
  action: Action,
): PatientDataState {
  const myForm = formGroupReducer(state.myForm, action);
  if (myForm !== state.myForm) {
    state = { ...state, myForm };
  }
  switch (action.type) {
    case 'some action type':
      return state;
    default: {
      return state;
    }
  }
}

export function reducer(state: PatientDataState | undefined, action: Action) {
  return patientFormReducer(state, action);
}

然后是应用程序 html：

<ng-container *ngIf="formState$ | async as formState">
  <form novalidate [ngrxFormState]="formState">
    <input
      type="text"
      [ngrxFormControlState]="formState.controls.someTextInput"
    />

    <input
      type="checkbox"
      [ngrxFormControlState]="formState.controls.someCheckbox"
    />

    <input
      type="number"
      [ngrxFormControlState]="formState.controls.nested.controls.someNumber"
    />
  </form>
</ng-container>

和组件.ts

import { Component } from '@angular/core';
import { OverviewNavComponent } from '../overview-nav/overview-nav.component';
import { RouterLink, Router, ActivatedRoute } from '@angular/router';
// store
import { Store, StoreModule } from '@ngrx/store';
import { FormGroupState, NgrxFormsModule, setValue } from 'ngrx-forms';
// icons
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import {
  bootstrapArrowRightCircleFill,
  bootstrapArrowLeftCircleFill,
} from '@ng-icons/bootstrap-icons';
import { Observable } from 'rxjs';
import {
  PatientDataState,
  PatientFormValue,
} from '../../../../store/patient-store/patients.reducer';

@Component({
  selector: 'app-patients-data',
  standalone: true,
  imports: [
    NgIconComponent,
    OverviewNavComponent,
    RouterLink,
    NgrxFormsModule,
    StoreModule,
  ],
  templateUrl: './patients-data.component.html',
  styleUrl: './patients-data.component.css',
  viewProviders: [
    provideIcons({
      bootstrapArrowRightCircleFill,
      bootstrapArrowLeftCircleFill,
    }),
  ],
})
export class PatientsDataComponent {
  formState$: Observable<FormGroupState<PatientFormValue>>;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private store: Store<PatientDataState>,
  ) {
    this.formState$ = store.select((s) => s.myForm);
  }

  // updateFormValue(newValue: PatientFormValue) {
  //   this.store.dispatch(setValue({ value: newValue }));
  // }
}

目前，当我访问该组件时，我收到错误控制台：

 The pipe 'async' could not be found

所以我添加导入：

CommonModule 

然后我得到：

Property 'someTextInput' does not exist on type 'FormGroupControls<PatientFormValue>'.

另一个问题是使用

<ng-container *ngIf="formState$ | async as formState">

因为我正在使用 Angular17，我不确定是否无法切换到：

@if(formState$ | async as formState){ }

当我导入 CommonModule 时，我收到多个错误，但我修复了管道问题。如果没有 CommonModule，我会遇到管道问题，但表单似乎可以工作。 如何使用 ngrx 表单和 Angular 17 将数据保存和检索到 ngrx Store？如何解决异步管道问题？

我尝试添加和删除 CommonModule 并重写 @if 语句。另外，我真的不明白如何操作数据 - 使用这个库更改change()上的数据。

Answer 1

异步管道是需要导入才能使用的东西。

使用独立组件时，您可以看到组件装饰器上设置了

standalone: true

。

您可以从

AsyncPipe

导入

CommonModule

或

NgIf

（包含许多指令和管道，例如

CurrencyPipe

、

NgFor

、

'@angular/common'

）。

...
import { CommonModule } from '@angular/common';
...

...
@Component({
  selector: 'app-patients-data',
  standalone: true,
  imports: [
    CommonModule, // <- changed here!
    NgIconComponent,
    OverviewNavComponent,
    RouterLink,
    NgrxFormsModule,
    StoreModule,
  ],
...