Question

我正在将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);
          }
        }
      }
    );
}

如何使用ngModelChange和Subject

0 个答案: