Question

我目前正在显示Min和Max字段，这些字段是我的angular 4应用程序中的范围值。我需要应用验证以确保范围是连续的并且它们不重叠。例如

如果范围如下，那么第二行不能从20M以下的任何东西开始，它必须从20M开始。

10M - 20M
20M - 40M
40M - 60M

我已应用了必需的字段验证，但不确定如何处理此验证。请参阅下面的实施

 </tr>
            <tr *ngFor="let item of domicileInfo.taxAssesment.items; let last = last;">
            <td *ngIf="!last">
                <click-input contenteditable="true">
                    <input [(ngModel)]="item.minSize"  required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
                </click-input>
              </td>

              <td *ngIf="!last">
                  <click-input contenteditable="true">
                      <input [(ngModel)]="item.maxSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
                  </click-input>
              </td>  
             <td  colspan="2" *ngIf="last"  class="text-right">  <span>&gt;</span>
                  <click-input contenteditable="true">
                      <input [(ngModel)]="item.minSize" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0">
                  </click-input>
              </td>     
              <td class="text-right">
                <click-input [classNames]="['percentage']" contenteditable="true">
                    <input [(ngModel)]="item.values[0]"  numberFormat="numberPercent:.0-2" required min="0" max="999999999999999">
                </click-input>
              </td>
              <td class="text-right">
                  <click-input [classNames]="['percentage']" contenteditable="true">
                      <input [(ngModel)]="item.values[1]"  numberFormat="numberPercent:.0-2" required min="0" max="999999999999999">
                  </click-input>
              </td>
            </tr>

组件代码

import { Component,OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { Base } from '@wtw/toolkit';
import * as BackendDto from '../../../../api/dtos';
import * as BackendProxy from '../../../../api/proxies';
import { IModalConfirmation } from '@wtw/platform/interfaces';
import { TranslateService } from '@ngx-translate/core';
import * as Rx from 'rxjs/Rx';
import { RunService } from '@wtw/platform/services';
import { CONSTS } from '../../../../config';

const minCapRequirement = 'minCapReq';
const premuimTaxCap = 'premTaxCap';

@Component({
  selector: 'app-domicile-selection',
  templateUrl: './domicile-selection.component.html'
})
export class DomicileSelectionComponent extends Base.ReactiveComponent implements OnInit, IModalConfirmation {
  domicileInfo: BackendDto.DomicileInformation;
  domicileOldInfo: BackendDto.DomicileInformation;
  public data: any;
  public onClose: Rx.Subject<boolean>;
  public active = false;
  public currentSelectedCurrency = '';
  public domicileId: number;
  public domiciles: BackendDto.Domicile[];
  public amendAssumptions: string;
  differ: any;
  fieldCategories: typeof BackendDto.DynamicFieldCategory = BackendDto.DynamicFieldCategory;

  private domicile: BackendDto.Domicile;
  private _selectedIndustries: BackendDto.Industry[];
  oldValue:string;
  constructor(
    private _bsModalRef: BsModalRef,
    private _refProxy: BackendProxy.ReferenceProxy,
    private _runs: RunService,
    private _translate: TranslateService

  ) {

    super();

  }

  public ngOnInit() {
    this.onClose = new Rx.Subject();
    return [this._runs.activeRun.subscribe(r => {
        this.currentSelectedCurrency = r.currencyInfo.currentSelectedCurrency;
    })];
  }


  public show() {
    this.domicileId = this.data.domicile.id;
    this.domicile = this.data.domicile;
    this.domiciles = this.data.domiciles;
    this._selectedIndustries = this.data.selectedIndustries;
    this.domicileInfo = this.domicile.domicileInformation;
    this.amendAssumptions = this._translate.instant('CAPTIVES.DOMICILES.AMENDASSUMPTIONS', { domicile:  this.domicile.name });
    this.active = true;

  }

  public close() {
    this.hide(null);
  }

  public udpatevalue(item,value) {
    item.maxSize = value;
  }
  public ok() {
    this.data.domicileId = this.domicileId;
    this.data.domicileInfo = this.domicileInfo;
    this.hide(true);
  }

  public cancel() {
    this.hide(false);
  }

  domicileChanged($event) {
    if (this.domicileId === this.domicile.id) {
      this.domicileInfo = this.domicile.domicileInformation;
    } else {
      this._loadInformation();
    }
  }

  private _loadInformation() {
    this._refProxy.getDefaultDomicileInformationForClient(this.domicileId, this._selectedIndustries[0].id)
      .uiSignal('infos')
      .subscribe(ret => {
        this.domicileInfo = ret.data;
        this.domicileOldInfo = this.domicileInfo;
        const domicileName = this.domiciles.find(x => x.id === this.domicileId).name;

        this.amendAssumptions = this._translate.instant('CAPTIVES.DOMICILES.AMENDASSUMPTIONS', { domicile: domicileName });
      });
  }


  private hide(nextVal?: boolean) {
    this.active = false;
    this.onClose.next(nextVal);
    this._bsModalRef.hide();
  }

  get addnDomicileDetailMinCapReq(): BackendDto.DomicileAddnDetail {
    return this.domicileInfo.addnDomcileDetails.find(x => x.fieldInfo.key === minCapRequirement);
  }

  get addnDomicileDetailPremuimTaxCap(): BackendDto.DomicileAddnDetail {
    return this.domicileInfo.addnDomcileDetails.find(x => x.fieldInfo.key === premuimTaxCap);
  }

  get maxCurrency() {
    return CONSTS.general.maximumCurrencyValue;
  }
}

UI

Answer 1

Angular 4中删除了

[min]和[max]验证程序指令。请参阅GitHub讨论here。

现在你必须自己实现这些指令。

import { Directive, Input } from '@angular/core';
import { Validator, NG_VALIDATORS, AbstractControl, Validators, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[min]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MinValidatorDirective, multi: true }]
})
export class MinValidatorDirective implements Validator {
  @Input() min: number;

  validate(control: AbstractControl): ValidationErrors | null {
    const validation = Validators.min(+this.min)(control);

    return validation && validation.min ? { min: true } : null;
  }
}

Live demo

Answer 2

我已经通过在我的组件和html中编写以下逻辑来解决了这个问题。如下所示，当用户在输入控件

中输入值时，我正在处理最小值和最大值

成分</ P>

isMinValid(currentItem: any, item_IDX: number) {
    if (item_IDX === 0) {
      return true;
    }

    var previousItem = this.domicileInfo.taxAssesment.items[item_IDX - 1];
    if (currentItem.minSize != previousItem.maxSize) {
      return false;

    }
    return true;
  }




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

        var previousItem = this.domicileInfo.taxAssesment.items[item_IDX - 1];
        if (currentItem.maxSize <= currentItem.minSize) {
          return false;
        }
        return true;
      }

html

<td *ngIf="!last" >
            <click-input   [classNames]="{'has-warning': !isMinValid(item,item_IDX) }">
                <!-- <input [(ngModel)]="item.minSize"  (ngModelChange)="modelChanged(item,item_IDX)" required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0"> -->
                 <input [(ngModel)]="item.minSize"   required min="0" max="999999999999999" numberFormat="shortNumberFormat:.0"> 
            </click-input>
          </td>

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

验证以角度显示的范围内的数字

2 个答案: