Как я могу использовать операторы rxjs вместе с ngrx-form?

[Этот вопрос касается 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 () и independentUntillChanged () или любые другие операторы rxjs для каждого из полей формы до того, как значения достигнут хранилища (или уйдут)?

с помощью встроенного конструктора форм angular мы можем передать свойство valueChanges:

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

Как мы можем добиться чего-то подобного с помощью ngrx-forms

Помните, что состояние не содержит никаких настраиваемых действий. Мы имеем дело только с собственными действиями ngrx-forms (например, ngrx / forms / SET_VALUE и т. д.).

Что-то вроде перехвата между шаблоном / компонентом и магазином.

Вопрос 2.

Как мы можем настроить метки для собственных действий ngrx-forms, например: ngrx / forms / SET_VALUE, ngrx / forms / MARK_AS_TOUCHED, для некоторых пользовательских меток?


angular rxjs angular-forms ngrx
person mx_code    schedule 22.04.2020    source источник
comment
не могли бы вы пояснить, почему вы хотите изменить типы действий?   -  person MrWolfZ    schedule 24.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Автор ngrx-форм здесь.

Вопрос 1

Вместо того, чтобы пытаться отбросить значения до того, как они попадут в магазин, я бы посоветовал вам отклонить значение до того, как возникнет какой-либо наблюдаемый побочный эффект. Основная модель ngrx-forms - синхронизация состояния и просмотра.

Например, как и в вашем примере из @angular/forms, вы можете использовать следующее, чтобы отменить значение формы:

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

вопрос 2

Невозможно настроить типы действий ngrx-форм.

person MrWolfZ    schedule 24.04.2020
comment
Большое спасибо, чувак. Но у меня большое дерево элементов управления и невозможно выбрать каждый из них. Эти элементы управления напрямую связаны с элементами ввода в шаблоне (поскольку я не хотел ссылаться на них в component.ts) и используются для поиска в реальном времени. Было бы здорово, если бы мы могли отклонить ввод до того, как он попадет в магазин. - person mx_code; 24.04.2020