以角度形式添加错误消息

时间:2016-03-31 17:03:28

标签: validation angular-formly

我们正在使用愤怒形式来制作表格。但是,当用户输入无效输入时,我们希望他们有明确的错误消息。所以我使用表达式创建了一个验证器:和message:但是我无法显示消息。

控制器字段值包含:

             {
                key: 'port',
                defaultValue: 2301,
                type: 'input',
                validators: {
                  isPort: {
                    expression : function(viewValue, modelValue) {
                        var value = modelValue || viewValue;
                        return !value || (/^\d+$/.test(value) && value!='' && value>0 && value<65535);
                      },
                    message: '$viewValue +" is not a valid port"'
                  }
                },
                templateOptions: {
                    type: 'number',
                    required: true,
                    label: 'Port',
                    placeholder: 'Enter Port'
                }
              }

我们调用html代码中的字段:

<formly-form model="execServers" fields="informationFields" form="form2"></formly-form>

但是我们没有看到错误消息显示。它确实变为红色并显示无效,只是没有消息。

我还创建了一个描述我的问题的{jsbin http://jsbin.com/weyotudoqu/1/edit?html,js,console,output

我很确定我只是遗漏了一些简单的东西,因为我看了很多这样做的例子并且文字显示http://angular-formly.com/#/example/intro/codementor

2 个答案:

答案 0 :(得分:1)

我认为它没有显示,因为你没有设置在输入的html中显示错误。像那样:

<md-input-container class="md-block">
    <label>{{to.label}}</label>
    <input ng-model="model[options.key]">
    <div class="my-messages" ng-messages="options.formControl.$error" ng-if="options.validation.errorExistsAndShouldBeVisible">
    <div class="error-message" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">
            {{message(options.formControl.$viewValue, options.formControl.$modelValue, this)}}
        </div>
    </div>
</md-input-container>

您可以在http://angular-formly.com/#/example/advanced/validators

查看详细信息

答案 1 :(得分:0)

我能够解决这个问题。我意识到我缺少一些其他配置,如本例所述 http://angular-formly.com/#/example/other/error-summary