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

Question

[[这个问题与ngrx格式有关]

问题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-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等）。

类似于在模板/组件与商店之间进行拦截的事情。

---

问题2。

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

[[这个问题与ngrx格式有关]问题1.想象这是我的reducer.ts //reducer.ts import {Action，CombineReducers} from'@ ngrx / store';导入{createFormGroupState，...

Answer 1

这里是[[ngrx-forms