在线示例: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})]],
});
}