首页 文章

材料输入,带有AngularDart中的验证和错误消息

提问于
浏览
1

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

我们在此组件中有一个默认消息错误( Enter a number ),如下图所示:

enter image description here

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

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

1 回答

  • 1

    这些组件已经编写了几个验证器,可以帮助您 .

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

    这些验证器来自here . 错误消息设置为友好百分比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用于常规输入,但百分比需要它自己的属性,因为它直接使用输入 .

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

相关问题