Question

我在Angular中对数据和类绑定存在一些问题，并且都无法禁用提交按钮。

checkNewChampName(value) {
    if (this.actualChampionships.indexOf(value) !== -1) {
      this.validNewChampName = false;
    } else {
      this.validNewChampName = true;
    }
  }

<form #userForm="ngForm">
  <div class="form-group">
    <label>Name</label>
    <input #name="ngModel" type="text" [class.is-invalid]="!validNewChampName" class="form-control" name="name" [(ngModel)]="newChampName" (keydown)="checkNewChampName(name.value)">
  </div>
<button [disabled]="userForm.form.invalid" class="btn btn-primary">Submit</button>
</form>

所以我想要一个输入，该输入为每个按键按下调用验证方法。该验证应将类变量设置为true或false，这取决于是否是数组的value元素。我想将此布尔变量绑定到输入的“ is-invalid”类。我有3个问题：

一开始我的输入是红色的，如果我写点东西然后再次删除为空白，它就不会再次变成红色（也不应该一开始也不是），那么为什么一开始是红色的？ / li>
验证方法几乎可以使用，但可以延迟一个字符。因此，如果数组中有“ asdf”，则我的输入将保持蓝色，但在下一次按下按键时它将变为红色。
当我的输入为红色时，为什么不禁用该按钮？

Answer 1

之所以是红色的，是因为该变量首先设置为false，并且您已经告诉它只要为false就会显示错误。除非您键入某些内容，否则将不会启用将其设置为true的逻辑。如果您想避免这种情况，可以选择以下几种方法：

**请更改您的逻辑，以便仅在触摸输入时才显示错误（例如

[class.is-invalid]="name.dirty && !validNewChampName"

**，或者您可以将变量默认设置为true：

export class Whatever {
validChampName = true;
}

对于＃2，您需要获取模型的值，所以请尝试：

尝试 （keydown）=“ checkNewChampName（newChampName）”

也请考虑绑定到（ngModelChange）=“ checkNewChampName（$ event）” 。这样，您的逻辑不仅会在按下键盘时运行，而且还会在值发生更改时运行。

最后，它没有被禁用，因为它应该是

userForm.invalid

（不带表格）

Answer 2

问题是String.Format()事件在更新$strMsg = '{0}{1}{2}' -f $file, [Environment]::NewLine, [System.IO.File]::ReadAllText($file.FullName)之前被调用。为了响应输入更改，请处理keydown：

ngModel

有关演示，请参见this stackblitz。

未禁用该按钮，因为在输入元素上没有实际的表单验证（例如，具有ngModelChange或<input ... [(ngModel)]="newChampName" (ngModelChange)="checkNewChampName($event)">属性）。您正在执行的验证仅在组件逻辑中，但实际上并不会使表单无效。您可以为该字段定义一个自定义验证器，如this article中所述。另一种选择是切换到Reactive forms模型，其中更容易实现custom validation。对于您而言，简单的解决方案是在当前验证失败时禁用按钮：

required

为何Angular数据绑定“延迟”？

2 个答案: