Html 使用布尔标志进行表单验证

在HTML中，我有一个

（change）=“limitUser（$event）”

函数。在typescript中，我有一个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>

p、 名称{{i}
请输入小于10的数字

在typescript中：

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;
}

limitUser（事件）{
for（设i=0；i10）{
this.inValid=true；
}

---

但是

inValid=true

应用于所有动态表单字段。我如何才能只将其应用于值大于10的字段。

嗯，

inValid

是一个布尔变量，您希望它保持每个适用字段的有效性

每个字段都有一个单独的变量，或者创建一个方法来检查每个字段的有效性。让我们使用第二种方法：

因此，您的HTML代码应该如下所示（更新

*ngIf

指令）：

您可以重用

无效的
变量来检查表单的整体有效性，也可以将其删除

更新：

要在禁用所有内容时禁用“提交”按钮，请执行以下操作：

修改提交按钮以在HTML中包含
[禁用]
属性：

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

您的HTML无效，请调整。我已关闭标记。但除此之外，它是一个有效的HTML代码，因为它运行正常。只是验证没有正确应用。
input
的三个属性缺少结束引号。是的，我关闭了这些属性。感谢您的输入。我只是键入了代码，没有复制它。但是您能找出答案吗现在的问题是您只有一个全局标志。您的每个数据项都需要一个“无效”标志。您建议我在
isInvalid（index）{
也有功能？否则它会立即抛出一个错误，不是吗？@bit不需要
forLoop
，角度运行自动变化检测（除非另有规定）。因此，
isInvalid
功能将在每次检测到更改时自动运行。请尝试使用该功能，因为它在我的回答中是这样的。如果它对您有效，请告诉我：）我不确定原因，但我得到了
返回此的错误。数据[I]。用法<10
噢，我犯了一个错误，请使用
索引
而不是
I
。我已更新了答案。请@Bitly重试，非常抱歉@Tashi Starset
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;
  }
 }
}

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

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