при использовании угловой формы для проверки формы сообщения об ошибках проверки не отображаются при нажатии кнопки Отправить

Проблема заключается в том, что появляется сообщение проверки, и текстовое поле становится красным, когда определенные поля щелкаются и размываются. Но когда я нажимаю кнопку Отправить формы, не касаясь ни одного из полей ввода, сообщения об ошибках не отображаются, и ни одно из текстовых полей не становится красным.

Правильный способ заключается в том, что он должен показать все сообщения проверки во время отправки, и все текстовые поля должны стать красными.

Планка для этого

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>

Может ли кто-нибудь любезно дать мне решение для этого? Спасибо заранее

1 ответ

  1. Кажется, что форма не позволит вам отправить его, потому что у вас есть необходимые поля там.

    Таким образомform.$submitted, значение никогда не будет true в настройках опции formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression.