使用布尔标志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);
}