Angular Validator.maxlength在按键时显示消息

我想在按键上显示某些验证消息，例如最大长度。当前，它们显示您是否签出或单击该字段

表格组：

this.shortForm = this.fb.group({
  fName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]]
})

模板：

<md-input-container>
 <md-error *ngIf="shortForm.get('fName').hasError('maxlength') && shortForm.get('fName').touched">
      Maximum of 50 characters
 </md-error>
</md-input-container>

最多50个字符

也不起作用：

<md-input-container>
 <md-error *ngIf="shortForm.get('fName').hasError('maxlength')">
      Maximum of 50 characters
 </md-error>
</md-input-container>

最多50个字符

如果用户输入在按键时点击最大长度，而不是等待用户点击tab或单击out，我如何显示错误消息

更新：

如果我搬家

<md-error *ngIf="shortForm.get('fName').hasError('maxlength')">
 Maximum of 50 characters
</md-error>

最多50个字符

在md输入容器的外部，错误消息以按键方式显示。这可能是棱角材质中的错误吗

更新#2：

---

每次值更改时，默认角度验证都会进行验证（基本上在按键时）。但是，您正在检查触摸的

。这就是让它等待用户标记或离开字段的原因

---

只需删除

.toucted

表达式，它就可以根据需要工作。

默认角度验证会在每次值更改时进行验证（基本上是在按键时）。但是，您正在检查触摸的

。这就是让它等待用户标记或离开字段的原因

---

只需删除

.toucted

表达式，它就可以根据需要工作。

如前所述，一旦输入模糊，就会将其标记为

toucted

。默认情况下，当触摸无效控件时，会显示

md error

。您可以使用自定义的

errorStateMatcher

将其更改为“脏时显示”

看

app.component.html

也检查这个

---

---

编辑：还有一个全局选项，用于始终显示所有输入的脏错误（请参阅输入文档）。此外，您还可以根据需要使errorStateMatcher变得复杂（如果希望在错误状态计算中使用实例属性，则需要在模板中绑定（this））。

如前所述，一旦模糊，输入将被标记为

已触摸

。默认情况下，当触摸无效控件时，会显示

md error

。您可以使用自定义的

errorStateMatcher

将其更改为“脏时显示”

看

app.component.html

也检查这个

---

---

编辑：还有一个全局选项，用于始终显示所有输入的脏错误（请参阅输入文档）。此外，您还可以根据需要使errorStateMatcher变得复杂（如果希望在错误状态计算中使用实例属性，则需要在模板中绑定（this））。

尝试过，但仍然没有显示。但是，我知道验证器正在使用keypress，因为我的错误对象输出：名字规则：{{shortForm.get（'fName'）。错误| json}}在keypress上更新。尝试过了，但仍然没有显示。然而，我知道验证器正在使用keypress，因为我的错误对象输出：名字规则：{{shortForm.get（'fName'）。errors | json}}在keypress上更新。为什么我会得到

error form.component.ts（86,82）：'；'应为。

在返回末尾的分号上？可能在方法或类中的其他位置缺少右括号，但如果没有代码，我无法知道。您可以看到，只有在添加代码块时，它才能在plunker I linkedIts中正常工作。否则，其他一切都是有效的。这可能与typescript有关吗？我怎么会得到

ERROR form.component.ts（86,82）：'；'应为。

在返回末尾的分号上？可能在方法或类中的其他位置缺少右括号，但如果没有代码，我无法知道。您可以看到，只有在添加代码块时，它才能在plunker I linkedIts中正常工作。否则，其他一切都是有效的。这可能与打字脚本有关吗？

<md-input-container>
  <input mdInput type="text" formControlName="fName" placeholder="First Name" [errorStateMatcher]="dirtyMatcher">
  <md-error *ngIf="fNameControl.hasError('maxlength')">
    Maximum of 50 characters
   </md-error>
</md-input-container>  

/** Whether the invalid control is dirty or submitted */
dirtyMatcher(control: FormControl, form: FormGroupDirective | NgForm): boolean {
  const isSubmitted = form && form.submitted;
  return !!(control.invalid && (control.dirty || isSubmitted)));
}