Как я могу использовать операторы rx js вместе с ngrx-формой? - PullRequest
Новая
       73

Как я могу использовать операторы rx js вместе с ngrx-формой?

1 голос
/ 22 апреля 2020

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

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

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

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

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

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

Вопрос 2.

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

1 Ответ

1 голос
/ 24 апреля 2020

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

Вопрос 1

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

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

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

Вопрос 2

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

...