首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用angular-formly进行表单验证时,单击提交时不会显示验证错误消息

使用angular-formly进行表单验证时,单击提交时不会显示验证错误消息
EN

Stack Overflow用户
提问于 2016-05-23 14:59:45
回答 1查看 1K关注 0票数 0

问题是当单击并模糊显示特定字段时,将显示验证消息,并且文本字段变为红色。但是,当我单击表单的submit按钮而没有接触任何输入字段时,没有显示错误消息,文本字段也没有变红。

正确的方法是,它必须在提交期间显示所有验证消息,并且所有文本字段都必须变为红色。

最重要的是

http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT

代码语言:javascript
复制
<!DOCTYPE html>
<html>

  <head>
    <title>Angular-Formly</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  </head>

<!-- form declaration-->
  <body ng-app="app" ng-controller="MainController as vm">
    <div class="container col-md-4 col-md-offset-4">
      <form novalidate name="vm.form"  ng-submit="vm.formsubmit()" >
         <formly-form model="vm.user" fields="vm.fields" form="vm.form" >

         </formly-form>
         <button type="submit" class="btn btn-default">Submit</button>
       </form>
    </div>

    <!-- Application Dependencies -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/api-check/7.2.4/api-check.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script data-require="angular-messages@1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly/6.11.0/formly.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/4.3.1/angular-formly-templates-bootstrap.js"></script>


    <!-- Application Scripts -->
    <script src="app.js"></script>
    <script src="MainController.js"></script>


    <script type="text/ng-template" id="custom-messages.html">
    <div class="my-messages" ng-messages="field.$error" ng-style="{color: 'red'}" ng-if="form.$submitted">
        <div  class="my-message" ng-message"required">required Message</div>
    </div>
    </script> 


    <script type="text/ng-template" id="formly-messages.html">
    <formly-transclude></formly-transclude>
    <div class="my-messages" ng-messages="form.$error" ng-style="{color: 'red'}" ng-if="fc.$touched">
        <div ng-repeat="(name, message) in ::options.validation.messages" ng-message="{{::name}}">{{message(fc.$viewValue, fc.$modelValue, this)}}
        </div>
    </div>
    </script> 
  </body>

</html>

有人能给我这个问题的解决方案吗?提前感谢

EN

回答 1

Stack Overflow用户

发布于 2016-09-19 21:20:18

该表单似乎不允许您提交它,因为您在其中有必填字段。

因此,在您的选项设置formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression中,form.$submitted值永远不会为真。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37384470

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档