Как использовать ngModelChange и Subject - PullRequest
Новая
       33

Как использовать ngModelChange и Subject

0 голосов
/ 30 марта 2019

Я использую Angular 7 с TypeScript 3.2 Я пытаюсь проверить productSKU привязанный к пользовательскому вводу (не внутри формы), чтобы разрешить 9 символов ^[a-zA-Z0-9-_]+$ Модель обновляет мое значение из модели productItem. Когда пользователь изменяет значение, если оно проверено правильно, оно обновляет значение в хранилище ngrx новым значением. Если не подтверждено, вернитесь к последнему правильному подтвержденному значению в previousProductSKU.

У меня есть это решение. Пока это работает, но в текстовом поле мигает новое значение, старое значение и возвращается к новому значению. Это не желательно. Где в моем коде ниже, я иду не так? 

// my html
<input matInput maxlength="9" #productSKUBox
    [(ngModel)]="productSKU"
    (ngModelChange)="productSKUChanged$.next($event)">

// my component 
ngOnInit() {
    this.productSKU = this.product.productSKU;
    this.subscribeToProductSKUChange();
}

subscribeToProductSKUChange() {
    this.productSKUChanged$.pipe(
      debounceTime(500),
      distinctUntilChanged((prevValue, newValue) => {
        return prevValue === newValue;
      }),
      takeUntil(this.destroyed$))
      .subscribe(data => {
        if (data) {
          this.previousProductSKU = this.productSKU = this.productItem.productSKU;
          if (data.match(/^[a-zA-Z0-9-_]+$/)) {
            this.productSKU = data;
            this.store.dispatch(ProductActions.updateProductSKU(this.productSKU));
          } else {
            this.productSKU = this.previousProductSKU;
            this.productSKUChanged$.next(this.previousProductSKU);
          }
        }
      }
    );
}
...