Проверка поля формы не работает Angular 8 - PullRequest
Новая
       47

Проверка поля формы не работает Angular 8

0 голосов
/ 14 июля 2020

Я проверяю поле формы, которое создается динамически. В основном у меня есть три проверки: 

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 гарантирует, что пользователь вводит только числа

1 Ответ

0 голосов
/ 14 июля 2020

Для формы, управляемой шаблоном, вы можете просто проверить и изменить значение следующим образом: 

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

Для реактивной формы вы можете подписаться на 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);
  }
});

Рабочая демонстрация

...