Проверка формы с использованием логического флага Angular 8 - PullRequest
Новая
       44

Проверка формы с использованием логического флага Angular 8

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

В HTML У меня есть функция (change)="limitUser($event)". В машинописном тексте у меня есть for l oop, который проходит через каждый элемент и проверяет, меньше ли его значение 10. Если оно превышает 10, оно устанавливает inValid = true. В HTMl все мои поля формы устанавливают значение как true. Я хочу, чтобы только поле формы со значением больше 10 было установлено как истинное.

HTML Код: 

<div *ngFor="p of data; let i = index">
<label>p.name{{i}}</label>
<input type="text" class="form-control" (change)="limitUser($event)" name="p.name{{i}}" [(ngModel)]="p.usage" id="p.name">
<div class="danger" *ngIf="inValid">
Please enter number smaller than 10
</div>
</div>

В машинописном тексте: 

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.inValid = true;
}

Но inValid = true применяется ко всем полям формы c Dynami. Как его поставить только на поле, значение которого больше 10.

1 Ответ

1 голос
/ 14 июля 2020

Ну, inValid - это одна логическая переменная, и вы ожидаете, что она будет содержать достоверность для каждого применимого поля.

Либо создайте отдельную переменную для каждого поля, либо создайте метод, который проверяет достоверность для каждого поля. Давайте go со вторым подходом:

Итак, ваш HTML код должен выглядеть так (обновите директиву *ngIf): 

<div *ngFor="p of data; let i = index">
 <label>p.name{{i}}</label>
 <input type="text" class="form-control" name="p.name{{i}}" (change)="limitUser($event)" [(ngModel)]="p.usage" id="p.name">
 <div class="danger" *ngIf="isInvalid(i)">
  Please enter number smaller than 10
 </div>
</div>

И добавьте новый метод в свой TS, а также изменить limitUser(): 

isInvalid(index) {
 return this.data[index].usage > 10;
}

limitUser(event) {
 for (let i = 0; i < this.data.length; i ++) {
  // btw, use === to compare; == means loosely compare and = means assign
  // or just append ! to check for falsy values, like:
  if (!this.data[i].usage){
   this.data[i].usage = 0;
  }
 }
}

Вы можете повторно использовать свою переменную inValid, чтобы проверить общую действительность формы, или просто удалить ее.

ОБНОВЛЕНИЕ:

Чтобы отключить кнопку отправки, когда все отключено:

Измените кнопку отправки, чтобы включить атрибут [disabled] в HTML: 

...
<button type="submit" [disabled]="isFormInvalid">
...

И в ТС: 

get isFormInvalid() {
 return this.data.some(datum => datum.usage > 10);
}
...