Обработка валидации в 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;
  }
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
35
1

Ответы 1

Похоже, вы хотите сделать их истинными для первого индекса, а затем добавить в свой код: вы можете проверить, являются ли _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. Теперь, если вы также хотите проверить первый элемент, проверьте item_IDX вместе с 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;
}

Я только что заметил. почему мы проверяем истину и снова устанавливаем истину if (this._isMaxValid) {

Tom 01.05.2018 15:19

Вопрос?? Это гарантирует, что если флаг стал ложным хотя бы один раз, он больше не будет установлен в истинное значение. Это основная идея. Очевидно, вы можете его оптимизировать.

Ashish Ranjan 01.05.2018 20:44

Другие вопросы по теме