表单字段验证不起作用Angular 8

Question

我正在验证一个动态创建的表单字段。我基本上有三个验证：

1. Value inputted should be between 0-10
2. Only numbers should be allowed
3. As the value is added greater than 10 it changes automatically to 10 but I want to show a message below the form field that it cannot be inputted above 10 and the submit button should be disabled. So it is invalid when when larger than 10 is added. 

在我的HTML:中

<div class="form-group col-md-6" *ngFor="let p of data; let i = index">
<label class="textfield_label">{{p.name}}</label>
<div class="textfield" [class.has-error]="p.usageControl.invalid">
<div *ngIf="p.usageControl.invalid">
<input type="text" maxlength="2" min="0" max="10" (keypress)="isNumberKey($event)" (change)="limitUser($event)" class="form-control" id="p.name" name="p.name{{i}}" [(ngModel)]="p.usage" style="border: 2px red solid;" #p.usageControl="ngModel" required>
<div class="alert alert-danger" style="margin-top: 5px;" *ngIf="p.usageControl.invalid">
Please enter an number smaller than 10
</div>
</div>
<input [hidden]="p.usageControl.invalid"  maxlength="2" min="0" max="10" (keypress)="isNumberKey($event)" (change)="limitUser($event)" type="text" class="form-control" id="p.name" #p.usageControl="ngModel" class="form-control" [(ngModel)]="p.usage" name="p.name{{i}}" required>
</div>
</div>

我也尝试过简单的：

<input type="text" maxlength="2" min="0" max="10" (keypress)="isNumberKey($event)" (change)="limitUser($event)" class="form-control" id="p.name" name="p.name{{i}}" [(ngModel)]="p.usage"> 

在我的打字脚本中，我有两种方法：

isNumberKey(evt): boolean{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
}
return true;
}
limitUser(event){
for (let i = 0; i < this.data.length; i ++) {
if (this.data[i].usage < 0 || this.data[i].usage === null || this.data[i].usage === "") {
this.data[i].usage  = 0;
} if (this.data[i].usage > 10) {
this.data[i].usage = 10;
}
}
}

limitUser限制用户输入高于10或低于0的任何值，因为它会根据预期自动将其更改为10或0。isNumberOnly确保用户只输入数字

Answer 1

对于模板驱动的表单，您只需检查并修改如下值：

<input type="number"  [(ngModel)]="usage" min="0" max = "10" (ngModelChange)="usage > 10 ? usage = 10:true"/>

对于Reactive表单，您可以订阅输入的valueChanges，如果它大于10，则通过编程将其设置为10。

尝试如下：

.html

<input type="number" class="form-control" formControlName="usage" />

.ts

this.myForm = this.formBuilder.group({
usage: [null, [Validators.min(0), Validators.max(10)]]
});
this.myForm.get("usage").valueChanges.subscribe(val => {
if (val > 10) {
this.myForm.get("usage").setValue(10);
}
});

工作演示