angular8表单校验：小数校验（指定小数位数、指定最大数、指定最小数）

在线示例：https://zhtt.gitee.io/angular-demo/great-ngform8/#/form/decimal

参考地址：https://www.npmjs.com/package/great-ngform

<div class="great-form-group">
    <label>任意数字:</label>
    <div class="great-input">
      <input type="text" formControlName="decimal" class="input"><span>默认可以输入任意数字</span>
      <div class="great-form-error-text" *ngIf="form.get('decimal').dirty && form.get('decimal').errors">只能输入数字！</div>
    </div>
  </div>
  <div class="great-form-group">
    <label>必须2位小数:</label>
    <div class="great-input">
      <input type="text" formControlName="decimal1" class="input"><span>指定输入的小数位数</span>
      <div class="great-form-error-text" *ngIf="form.get('decimal1').dirty && form.get('decimal1').errors">必须2位小数！</div>
    </div>
  </div>
  <div class="great-form-group">
    <label>至多2位小数:</label>
    <div class="great-input">
      <input type="text" formControlName="decimal2" class="input"><span>指定最多可以输入的小数位数</span>
      <div class="great-form-error-text" *ngIf="form.get('decimal2').dirty && form.get('decimal2').errors">至多2位小数！</div>
    </div>
  </div>
  <div class="great-form-group">
    <label>至少2位小数:</label>
    <div class="great-input">
      <input type="text" formControlName="decimal3" class="input"><span>指定最少输入的小数位数</span>
      <div class="great-form-error-text" *ngIf="form.get('decimal3').dirty && form.get('decimal3').errors">至少2位小数！</div>
    </div>
  </div>
  <div class="great-form-group">
    <label>2-3位小数:</label>
    <div class="great-input">
      <input type="text" formControlName="decimal4" class="input"><span>指定可以输入的小数位数范围</span>
      <div class="great-form-error-text" *ngIf="form.get('decimal4').dirty && form.get('decimal4').errors">必须2-3位小数！</div>
    </div>
  </div>
  <div class="great-form-group">
    <label>1-100:</label>
    <div class="great-input">
      <input type="text" formControlName="decimal5" class="input"><span>指定可以数字的数字范围</span>
      <div class="great-form-error-text" *ngIf="form.get('decimal5').dirty && form.get('decimal5').errors">只能输入1-100之间的数字！</div>
    </div>
  </div>
  <div>
    <div class="great-form-group">
      <label>数字与小数范围:</label>
      <div class="great-input">
        <input type="text" formControlName="decimal6" class="input"><span>指定可以输入的数字范围、小数位数范围</span>
        <div class="great-form-error-text" *ngIf="form.get('decimal6').dirty && form.get('decimal6').errors">必须2-3位小数，且在1-100之间的数字！</div>
      </div>
    </div>
  </div>
  <div>
    <div class="great-form-group">
      <label>大于等于100:</label>
      <div class="great-input">
        <input type="text" formControlName="decimal7" class="input">
        <div class="great-form-error-text" *ngIf="form.get('decimal7').dirty && form.get('decimal7').errors">必须大于等于100！</div>
      </div>
    </div>
  </div>
  <div>
    <div class="great-form-group">
      <label>小于等于100:</label>
      <div class="great-input">
        <input type="text" formControlName="decimal8" class="input">
        <div class="great-form-error-text" *ngIf="form.get('decimal8').dirty && form.get('decimal8').errors">必须小于等于100！</div>
      </div>
    </div>
  </div>
  <div>
    <div class="great-form-group">
      <label>大于100:</label>
      <div class="great-input">
        <input type="text" formControlName="decimal9" class="input">
        <div class="great-form-error-text" *ngIf="form.get('decimal9').dirty && form.get('decimal9').errors">必须小于100！</div>
      </div>
    </div>
  </div>
  <div>
    <div class="great-form-group">
      <label>小于100:</label>
      <div class="great-input">
        <input type="text" formControlName="decimal10" class="input">
        <div class="great-form-error-text" *ngIf="form.get('decimal10').dirty && form.get('decimal10').errors">必须大于100！</div>
      </div>
    </div>
  </div>

 

ngOnInit() {
    this.form = this.fb.group({
      decimal: new FormControl(null, [
        this.formValidatorService.decimal()
      ]),
      // 必须2位小数校验
      decimal1: [null, [this.formValidatorService.decimal({scale: 2})]],
      // 最多2位小数校验
      decimal2: [null, [this.formValidatorService.decimal({maxScale: 2})]],
      // 最少2位小数校验
      decimal3: [null, [this.formValidatorService.decimal({minScale: 2})]],
      // 必须2-3位小数
      decimal4: [null, [this.formValidatorService.decimal({minScale: 2, maxScale: 3})]],
      // 只能输入1-100之间的数字
      decimal5: [null, [this.formValidatorService.decimal({min: 1, max: 100})]],
      // 必须2-3位小数，且在1-100之间的数字
      decimal6: [null, [this.formValidatorService.decimal({minScale: 2, maxScale: 3, min: 1, max: 100})]],
      decimal7: [null, [this.formValidatorService.decimal({min: 100})]],
      decimal8: [null, [this.formValidatorService.decimal({max: 100})]],
      decimal9: [null, [this.formValidatorService.decimal({greaterThan: 100})]],
      decimal10: [null, [this.formValidatorService.decimal({lessThan: 100})]],
    });
  }