[英]Validation of input type number in Angular 6
我在Angular 6中工作,在ngForm中有此輸入
<form #editForm="ngForm" id="editForm" class="well-model-form px-2">
.
.
.
<div class="col-4">
<input type="number" class="input-style-text"
[(ngModel)]="myModeldata.depth.value" name="depth">
</div>
.
.
</form>
現在,輸入允許輸入以下值:
9 .... 5
6.7.8.4
0-794 ++++ 1--3
8eeee.eeeee
我需要檢查此數字的有效性以及maxlength = 10
我嘗試了許多用於數字驗證的方法,例如:
<input type="number" class="input-style-text"
[(ngModel)]="myModeldata.depth.value" name="depth"
[ngClass]="{ 'is-invalid': depth?.touched && depth?.invalid }"
div *ngIf="depth?.invalid && (depth?.dirty || depth?.touched)"
class="alert alert-danger">
</div>
or
div *ngIf="editForm.depth?.invalid && (editForm.depth?.dirty || editForm.depth?.touched)"
class="alert alert-danger">
</div>
and in css
input.form-control.ng-touched.ng-dirty.ng-invalid,
input.form-control.is-invalid {
border: 1px solid #f86c6b !important;
}
沒有任何作用
同樣對於maxlength,我嘗試了很多事情,但沒有任何效果,其中一些是:
<input... ngModel maxlength="10" required>
<div *ngIf="editForm.depth?.maxlength">
Depth can be max 10 characters long.
</div>
or
<input ng-maxlength="10" #undepth>
<div *ngIf="undepth?.maxlength">
Depth can be max 10 characters long.
</div>
編輯:解決了我從這2個鏈接中找到了解決方案inputTypeNumber inputAcceptNumbersOnly
keyPress(event: any, value: string) {
const pattern = /^[0-9\+\-\.]{1,9}$/;
let inputChar = String.fromCharCode(event.charCode);
if (value.toString().length == 10)
event.preventDefault();
if (event.keyCode != 8 && !pattern.test(inputChar))
event.preventDefault();
if (event.charCode == 46 && value.indexOf('.') >= 0)//has one dot
event.preventDefault();
if ((event.charCode == 43 || event.charCode == 45) && value.toString().length >= 1) //+ or - only comes in the first
event.preventDefault();
return null;
}
並在html文件中:
<input type="text" class="input-style-text" [(ngModel)]="myModeldata.depth.value"
name="depth"
(keypress)="keyPress($event, myModeldata.depth.value)">
您可以使用Angular Reactive Forms並將驗證器添加到控件中。
https://angular.io/guide/reactive-forms#simple-form-validation
之后,您只需索取myControl.valid
editForm = this.fb.group({
myModeldata: ['', Validators.maxLength(10)],
});
對於isNumber評估,您可以編寫自己的自定義驗證程序。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.