2016-05-23 6 views
0

Das Problem ist eine Validierung Nachrichten erscheint und das Textfeld rot, wenn bestimmte Felder angeklickt und verwischt werden. Aber wenn ich auf den Absenden-Button des Formulars klicke, ohne eines der Eingabefelder zu berühren, werden keine Fehlermeldungen angezeigt und keines der Textfelder wird rot.mit angular-formly für Formularvalidierungen, die Validierung Fehlermeldungen werden nicht angezeigt, wenn Sie auf Senden klicken

Der korrekte Weg ist, dass während der Eingabe alle Validierungsmeldungen angezeigt werden und alle Textfelder rot werden müssen.

Die zupfen hierfür ist

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="[email protected]" 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> 

Kann jemand bitte geben Sie mir die Lösung für dieses? Vielen Dank im Voraus

+0

Nicht sicher, ob dies in irgendeiner Weise hilft, aber werfen Sie einen Blick http://StackOverflow.com/a/37153508/4759033 –

Antwort

0

Es scheint, dass das Formular Ihnen nicht erlauben wird, es einzureichen, weil Sie erforderliche Felder darin haben.

Daher wird der form.$submitted Wert in Ihrer Optionseinstellung formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression niemals wahr sein.

Verwandte Themen