时间戳

首页 > 解决方案 > 处理角度 4 中的验证

angular - 处理角度 4 中的验证

问题描述

我正在尝试在 Angular 4 应用程序中实现验证逻辑。如果任何数据无效，我需要阻止用户保存。

如果你看到我有isMinValid和isMaxValid功能。我已经声明了两个私有变量_isMinValid和_isMaxValid字段，并用 true 或 false 对其进行了初始化。

我正在保存信息的 Ok 方法中检查此变量的值。

我面临的问题是，isMinValid函数isMaxValid会为表中的每一行调用，因此如果下一行是，true那么私有字段会被相应地分配值。因此最后一个值可能是true。我该如何解决这个问题？

 <tr *ngFor="let item of domicileInfo.taxAssesment.items; let last = last; let item_IDX = index">
              <td *ngIf="!last">
                <click-input [classNames]="{'has-warning': !isMinValid(item,item_IDX), 'number' : true}">
                  <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" shortNumberFormat="shortNumberFormat:.0">
                </click-input>
              </td>

              <td *ngIf="!last" class="text-right">
                <click-input [classNames]="{'has-warning': !isMaxValid(item,item_IDX), 'number' : true }">
                  <input [(ngModel)]="item.maxSize" required min="0" max="999999999999999" shortNumberFormat="shortNumberFormat:.0">
                </click-input>
              </td>
</tr>


     private _isMinValid: boolean = false;
      private _isMaxValid: boolean = false;

      public ok() {
        if (this._isMinValid && this._isMaxValid) {
          this.data.domicileId = this.domicileId;
          this.data.domicileInfo = this.domicileInfo;
          this.hide(true);
        }
      }

  isMinValid(currentItem: any, item_IDX: number) {
    if (item_IDX === 0) {
      this._isMinValid = true;
      return true;
    }
    let previousItem = this.domicileInfo.taxAssesment.items[item_IDX - 1];
    if (+currentItem.minSize !== +previousItem.maxSize) {
       this._isMinValid = false;
      return false;
    }
     this._isMinValid = true;
    return true;
  }


  isMaxValid(currentItem: any, item_IDX: number) {
    if (item_IDX === 0) {
      this._isMaxValid = true;
      return true;
    }

    if (+currentItem.maxSize <= +currentItem.minSize) {
      this._isMaxValid = false;
      return false;
    }
    this._isMaxValid = true;
    return true;
  }

标签： angulartypescript

解决方案

看起来，您想让它们为第一个索引为真，然后添加到您的代码中：您可以检查是否_isMaxValid并且_isMinValid已经为假，如果是，则不要为它们分配真。

isMaxValid(currentItem: any, item_IDX: number) {
    if (item_IDX === 0) {
      this._isMaxValid = true;
      return true;
    }

    if (+currentItem.maxSize <= +currentItem.minSize) {
      this._isMaxValid = false;
      return false;
    }
    if (this._isMaxValid) {
        this._isMaxValid = true;
    }
    return true;
}

对 min valid 做类似的事情。现在，如果您还想检查第一个元素，请检查item_IDXwith this._isMaxValid。例如：

isMaxValid(currentItem: any, item_IDX: number) {
    if (+currentItem.maxSize <= +currentItem.minSize) {
      this._isMaxValid = false;
      return false;
    }
    if (item_IDX === 0) {
        this._isMaxValid = true;
    }
    else if (this._isMaxValid) {
        this._isMaxValid = true;
    }
    return true;
}

推荐阅读