Question

问题是出现验证消息，并且当单击特定字段并模糊时文本字段变为红色。但是当我单击表单的提交按钮而不触及任何输入字段时，不会显示任何错误消息，并且没有任何文本字段变为红色。

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

这方面的内容是

http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT

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

有人可以帮我解决这个问题吗？提前致谢

Answer 1

似乎表单不允许您提交，因为您已经在那里获得必填字段。

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

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

1 个答案: