material-在 AngularDart 中输入验证和错误消息

Question

我想在 AngularDart 中使用 material-input 的验证和错误消息。

我们在这个组件中有一个默认消息错误（输入数字），如下图所示：

例如，我需要验证百分比字段输入是否在 0 到 100% 之间。如果不是，则应显示一条消息错误。

使用 Material 组件在 AngularDart 中处理输入验证和错误消息的方法是什么？

Answer 1

这些组件已经编写了几个验证器，可以在这里为您提供帮助。

<material-input type=[percent] [lower]="0" [upper]="100"></material-input>

这些验证器来自 here. The error messages are set to percent friendly here。如果您想覆盖自己的消息，您也可以这样做，这是代码。对于白板编码中的任何错误，提前致歉：

import 'package:angular_components/forms/error_renderer.dart';

@Component(
  selector: 'my-form'
  template: '<material-input type="percent" percentErrorRenderer="myErrors">')
class MyForm {
  ErrorFn myErrors = replaceErrors(
    {'lower-bound-number': 'Bigger number please',
     'upper-bound-number': 'Smaller number please'});
}

错误呈现器模式允许您使用通用验证器，但可以将消息更改为您想要的任何内容。您也可以将 errorRenderer 用于常规输入，但 percent 需要它自己的属性，因为它直接使用输入。

如果您的验证需要比包含的默认值更复杂，我建议您使用上面链接的验证器作为创建验证器的示例。

material-在 AngularDart 中输入验证和错误消息

material-input with validation and error message in AngularDart

angular-dart

angular-components