Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Angular - walidacja formularza - komunikat błędu, Problem z wartością minlength
client202
post 5.09.2017, 13:09:40
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 18.11.2015

Ostrzeżenie: (0%)
-----

Mam formularz, generalnie wszystko działa prawidłowo, mam natomiast problem z uzyskaniem wartości minlength ('zzzzzzzzzzzzzzzzz' w kodzie) dla poszczególnych pól.
Zależy mi aby komunikaty o błędach były odseparowane od stryktury formularza, tak jak jest obecnie. 

[HTML] pobierz, plaintext 
  1.  
  2. <html ng-app="formApp">
  3.     <head >
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.         </style>
  8.     </head>
  9.  
  10.     <body ng-controller="MainCtrl as ctrl">
  11.  
  12.         <form ng-submit="ctrl.submit()" name="form1">
  13.  
  14.             <label>Email</label>
  15.             <input type="email" 
  16.                 name="f1_email"
  17.                 ng-model="ctrl.user.email"            
  18.                 ng-minlength="10"
  19.                 required>
  20.  
  21.             <div ng-messages="form1.f1_email.$error" ng-show="form1.f1_email.$submitted || form1.f1_email.$touched ">
  22.                 <div ng-messages-include="error-messages"></div>
  23.             </div>
  24.  
  25.             <hr>
  26.             <label>Name</label>
  27.  
  28.             <input type="text" 
  29.                 name="f1_name"
  30.                 ng-model="ctrl.user.name"              
  31.                 ng-minlength="6"
  32.                 required>
  33.  
  34.             <div ng-messages="form1.f1_name.$error" ng-show="form1.f1_name.$submitted || form1.f1_name.$touched ">
  35.                 <div ng-messages-include="error-messages">
  36.                 </div>
  37.             </div>
  38.             <hr>
  39.             <input type="submit" value="Send" ng-disabled="form1.$invalid">
  40.             <hr>
  41.  
  42.         </form>
  43.         <hr>
  44.  
  45.  
  46.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
  47.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-messages.js"></script>
  48.  
  49.         <script type="text/ng-template" id="error-messages">
  50.             <div ng-message="minlength"> Your field must be at least {{zzzzzzzzzzzzzzzzz}} characters long.</div>
  51.             <div ng-message="required">Field required</div>
  52.             <div ng-message="email">Invalid e-mail kkk</div>
  53.         </script>
  54.  
  55.         <script>
  56.             angular.module('formApp',['ngMessages'])
  57.                 .controller('MainCtrl', [function() {
  58.  
  59.                     var self = this;
  60.                     self.submit = function() {
  61.                         console.log('User data', self.user);
  62.                     };
  63.                 }]);        
  64.         </script>
  65.  
  66.     </body>
  67.  
  68.  
  69. </html>
  70.  
  71.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 13:06
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn