如何将rxjs运算符与ngrx表单一起使用

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表单状态

//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形式类似的功能

请记住，该状态不包含任何自定义操作我们只处理原生的ngrx表单操作(如ngrx/forms/SET_VALUE等(。

类似于在模板/组件&商店。

---

问题2。

我们如何将ngrx表单的本地操作(如：ngrx/forms/SET_VALUE、ngrx/fforms/MARK_AS_TOUCHED(的标签自定义为一些自定义标签？

Answer 1

这里是ngrx表单的作者。

问题1

我建议您在出现任何可观察到的副作用之前取消值的抖动，而不是在到达商店之前尝试取消值的跳动。ngrx表单的核心模型是保持状态和视图同步。

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

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

---

问题2

无法自定义ngrx表单的操作类型。