Question

我正在尝试使用@ngrx/store来跟踪表单中的值。其中一个输入只能有数字。当我输入数据时，Redux状态正确地只存储数字，但更新的值没有反映在输入字段中，它仍然显示未清理的值。

已编辑：此问题并非特定于ngrx / store。从任何observable填充输入字段的值会导致此问题。尝试将数据存储在@Injectable类的行为主题中并公开公开.asObservable()，但遇到了同样的问题。

例如。）

“123abc”的输入值

Redux存储“123”（正确）

输入字段仍显示“123abc”（不正确，与Redux状态不匹配）

已编辑：如果我们使用123abc的示例输入，然后输入数字4，我们会直观地看到输入值更新为1234，与Redux商店相同。

export class InputComponent {
  private value: Observable<string>;

  constructor(private store: Store<IAppState>) {
    this.value = store
      .map(appState => appState.form.value)
      .distinctUntilChanged();
  }

  public onChange(value: string): void {
    const sanitizedValue: string =
      value.replace(/\D/g, '');

    this.store.dispatch(updateValue(sanitizedValue));
  }
}

<div>
  <input
    autofocus
    type="tel"
    [ngModel]="(value | async)"
    id="form-value"
    (ngModelChange)="onChange($event)"
  />
  <label for="form-value">Form Value</label>
</div>

通过observable设置Angular 2中的<input />值

0 个答案: