使用布尔标志的表单验证 Angular 8

Question

在 HTML 我有一个 (change)="limitUser($event)" 功能。在打字稿中，我有一个 for 循环，它遍历每个元素并检查值是否小于 10。如果它超过 10，它会设置 inValid = true。在 HTMl 中，我所有的表单字段都将值设置为 true。我只想将值大于 10 的表单字段设置为 true。

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 应用于所有动态表单域。怎么才能只放在大于10的字段上呢

Answer 1

好吧，inValid 是一个布尔变量，您希望它对每个适用字段都有效。

要么为每个字段设置一个单独的变量，要么创建一个方法来检查每个字段的有效性。让我们采用第二种方法：

因此，您的 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 变量来检查表单的整体有效性，或者直接删除它。

更新：

要在禁用所有内容时禁用提交按钮：

修改您的提交按钮以在 HTML:

中包含一个 [disabled] 属性

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

并且在 TS 中：

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

使用布尔标志的表单验证 Angular 8

Form Validation using a boolean flag Angular 8

html

validation

typescript

angular

angular8