wie überprüft form in der Ionischen mit angular js

Ich versuche, mit der ionic-framework mit Winkelgetriebe.Ich will tun, Validierung von meinem Formular auf den button klicken.Bedeutet, ich muss überprüfen Sie alle Bereich auf den button klicken.Alle Felder sind erforderlich ..ich brauche eine Fehlermeldung anzeigen, wenn ein Feld nicht erfüllt die Anforderung. Wie Passwort mindestens Zeichen 5 und maximal 10. Und E-Mail-Validierung.

könnten Sie mir bitte sagen, m wie ich das tun werde Validierung.Hier ist mein 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>

InformationsquelleAutor Shruti | 2015-03-18

  1. 9

    Ich vielleicht spät, aber hier ist was Sie tun können.

    Zunächst müssen Sie definieren, eine form (wie Sie) mit der ng-submit Richtlinie, so dass Sie Ihre form kann nach dem 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>

    Leite ich ein model in mein input-Feld, damit ich Sie Lesen kann später.
    Ich habe markiert, jeder Eingang mit einer benutzerdefinierten Richtlinie form-validate-after.

    Dies ist die Richtlinie, die ich erstellt habe:

    (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; });
            });
        }
    }

}());

    dieser code wird in einer Schleife durch alle deine input-Felder hinzufügen einer Klasse, wenn es markiert ist, als nicht gültig.

    Müssen Sie definieren ein css:

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

    vergessen Sie nicht, fügen Sie novalidate zu Ihrer form.

    novalidate wird verwendet, um browser deaktivieren der nativen form der Validierung.

    Wenn Sie möchten, legen Sie ein Feld als obligatorisch und definieren Sie die max und min Länge:

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

    Wenn Sie möchten, um zu sehen, in diesem Beispiel in Aktion, Sie können es überprüfen,hier.

    UPDATE

    Ein weiterer Ansatz ist, um alles in-line-änderung-Klasse, die auf jedem Etikett:

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

    Hier haben Sie, geben Sie jedem Feld eine name und verwenden ng-class Richtlinie.

    Den ngClass Direktive erlaubt es Ihnen, dynamische CSS-Klassen auf einem
    HTML-element durch databinding-ein Ausdruck, der für alle Klassen
    Hinzugefügt werden.

    Sehen Sie es in Aktion hier.

    InformationsquelleAutor LeftyX

Schreibe einen Kommentar