Question

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

表格组：

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>

也不起作用：

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

如果用户输入在按键上按下最大长度而不是等待它们到标签或点击，我该如何显示错误消息？

更新

如果我搬家

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

到md-input-container的外部，按键显示错误信息。这可能是角材料中的一个错误吗？

更新＃2： https://github.com/angular/material2/issues/4027

Answer 1

如上所述，输入一旦模糊，就会标记为touched。默认情况下，触摸无效控件时会显示md-error。您可以使用自定义errorStateMatcher更改它以显示脏时。

请参阅input docs。

app.component.html

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

app.component.ts

/** 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)));
}

另请查看此plunker showing an example。

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

Answer 2

每次值更改时，默认的Angular验证都会生效（所以基本上在keypress上）。但是，您正在检查touched。这就是让用户等待标签或离开现场的原因。

只需删除.touched表达式，它就可以按照您的要求运行。

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

2 个答案: