如何使用rxjs操作符以及ngrx-form？

Question

这个问题是关于ngrx-form的。

问题1.

想象一下这是我的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-窗体状态

//template html

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

...

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

使用角的本机表单生成器，我们可以通过管道传递valueChanges属性：

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

我们如何才能与ngrx窗体实现类似的功能？

记住，状态不包含任何自定义操作，我们只处理本机ngrx-操作(比如ngrx//SET_VALUE等)。

类似于拦截模板/组件与存储之间的内容。

问题2.

我们如何自定义ngrx-窗体本机操作的标签，例如: ngrx/forms/SET_VALUE、ngrx/forms/MARK_AS_触摸到一些自定义标签？

Answer 1

ngrx-表格的作者。

问题1

在到达商店之前，我建议你不要在任何可观察到的副作用发生之前就放弃这个值。ngrx窗体的核心模型是保持状态和视图的同步。

例如，与@angular/forms中的示例类似，您可以使用以下方法来删除表单值：

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

问题2

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