如何将 rxjs 运算符与 ngrx-form 一起使用？

Question

[这个问题是关于 ngrx-forms 的]

问题一

想象一下，这是我的 reducer.ts

//reducer.ts

import { Action, combineReducers } from '@ngrx/store';
import { createFormGroupState, formGroupReducer, FormGroupState } from 'ngrx-forms';

import { State as RootState } from '../app.reducer';

export interface FormValue {
  firstName: string;
  lastName: string;
  email: string;
  sex: string;
  favoriteColor: string;
  employed: boolean;
  notes: string;
}

export interface State extends RootState {
  simpleForm: {
    formState: FormGroupState<FormValue>;
  };
}

export class SetSubmittedValueAction implements Action {
  static readonly TYPE = 'simpleForm/SET_SUBMITTED_VALUE';
  readonly type = SetSubmittedValueAction.TYPE;
  constructor(public formValue: FormValue) { }
}

export const FORM_ID = 'simpleForm';

export const INITIAL_STATE = createFormGroupState<FormValue>(FORM_ID, {
  firstName: '',
  lastName: '',
  email: '',
  sex: '',
  favoriteColor: '',
  employed: false,
  notes: '',
});

const reducers = combineReducers<State['simpleForm'], any>({
  formState(s = INITIAL_STATE, a: Action) {
    return formGroupReducer(s, a);
  }
});

export function reducer(s: State['simpleForm'], a: Action) {
  return reducers(s, a);
}

& 每个字段都通过

连接到 ngrx-forms 状态


//template html

[ngrxFormControlState]="(formState$ | async).controls.firstName"
[ngrxFormControlState]="(formState$ | async).controls.lastName"
[ngrxFormControlState]="(formState$ | async).controls.email"

...

如何在值到达存储（或离开）之前为每个表单字段添加 debounceTime() 和 distinctUntillChanged() 或任何其他 rxjs 运算符？

使用 angular 的原生表单生成器，我们可以通过管道传输 valueChanges 属性:

this.myControl.valueChanges
.pipe(
 distinctUntilChanged(),
 debounceTime(200)
)

我们如何使用 ngrx-forms 实现类似的东西

请记住，状态不包含任何自定义操作 我们只处理本机 ngrx-forms 操作（如 ngrx/forms/SET_VALUE 等，..）。

template/component 和商店之间的拦截。

问题二

我们如何自定义 ngrx-forms 本机操作的标签，例如：ngrx/forms/SET_VALUE、ngrx/forms/MARK_AS_TOUCHED 到一些自定义标签？

Answer 1

ngrx-forms 的作者在这里。

问题 1

与其尝试在到达商店之前对值进行去抖动，我建议您在任何可观察到的副作用发生之前对值进行去抖动。 ngrx-forms的核心模型是保持状态和视图同步。

例如，类似于您在 @angular/forms 中的示例，您可以使用以下方法对表单值进行去抖动：

this.store.select(s => s.myForm.value.myControl).pipe(debounceTime(200))

问题 2

无法自定义 ngrx-forms 的操作类型。

如何将 rxjs 运算符与 ngrx-form 一起使用？

How can I use rxjs operators along with ngrx-form?

angular

rxjs

ngrx

angular-forms

问题 1

问题 2