All geek questions in one place

How to test form in ionic use angular js

I am trying to use ionic framework with angular. I want to validate my form on the click.Mean button. I need to check all fields when a button is clicked. All fields are required. I need to show an error message if the field does not meet the requirement. As a password, the minimum character is 5 and the maximum is 10. And check email.

Could you tell me how I will do the validation. Here is my code

<html ng-app=""> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Sign-in, Then Tabs Example</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body> <ion-view title="Page"> <ion-content padding="true" class="has-header has-footer"> <form> <label class="item item-input"> <span class="input-label">name</span> <input type="text" placeholder="name"> </label> <label class="item item-input"> <span class="input-label">email</span> <input type="email" placeholder="email"> </label> <label class="item item-input"> <span class="input-label">password</span> <input type="password" placeholder="password"> </label> </form> <button class="button button-balanced button-block">check validation</button> </ion-content> </ion-view> </body> </html>
+5
source share
1 answer

I'm probably late, but here's what you can do.

First of all, you need to define the form (like you) using the ng-submit directive so that your form can be a POST for the controller.

 <body ng-app="myApp"> <ion-view title="Page"> <ion-content padding="true" class="has-header has-footer"> <form name="loginForm" ng-submit="$scope.login($scope.user);" novalidate> <label class="item item-input"> <span class="input-label">name</span> <input type="text" placeholder="name" ng-model="$scope.user.username" form-validate-after> </label> <label class="item item-input"> <span class="input-label">email</span> <input type="email" placeholder="email" ng-model="$scope.user.email" form-validate-after> </label> <label class="item item-input"> <span class="input-label">password</span> <input type="password" placeholder="password" ng-model="$scope.user.password" form-validate-after> </label> </form> <button class="button button-balanced button-block">check validation</button> </ion-content> </ion-view> </body>

I pass the model to the input field so that I can read them later. I marked every input with a custom form-validate-after directive.

This is the directive I created:

 (function () { 'use strict'; angular .module('myApp', ['ionic']) .directive('formValidateAfter', formValidateAfter); function formValidateAfter() { var directive = { restrict: 'A', require: 'ngModel', link: link }; return directive; function link(scope, element, attrs, ctrl) { var validateClass = 'form-validate'; ctrl.validate = false; element.bind('focus', function (evt) { if (ctrl.validate && ctrl.$invalid) // if we focus and the field was invalid, keep the validation { element.addClass(validateClass); scope.$apply(function () { ctrl.validate = true; }); } else { element.removeClass(validateClass); scope.$apply(function () { ctrl.validate = false; }); } }).bind('blur', function (evt) { element.addClass(validateClass); scope.$apply(function () { ctrl.validate = true; }); }); } } }());

this code will go through all your input fields, adding a class if it is marked as invalid.

You need to define css:

 .form-validate.ng-invalid { border: 3px solid #cc2511; } .form-validate.ng-valid { border: none; }

Remember to add novalidate to your form.

novalidate is used to disable validation of your own browser form.

If you want to set the field as required and define max and min lenght:

 <input name="password" type="password" placeholder="password" ng-model="$scope.user.password" required ng-minlength='5' ng-maxlength='10'>

If you want to see this example in action, you can check it here .

UPDATE

Another approach is to set the entire linear variable class on each label:

 <label class="item item-input" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}"> ... </label>

Here you must specify each field a name and use the ng-class directive.

The ngClass directive allows you to dynamically set CSS classes to an HTML element by binding an expression representing all the classes to add.

You can see it in action here .

+9
source

Source: https://habr.com/ru/post/1215613/

More articles:


All Articles