angularJs form

時間 2019-12-20

標籤 angularjs form 欄目 AngularJS 简体版

原文原文鏈接

form.name.$valid是否有效javascript

form.name.$invalid 是否無效html

form.name.$error錯誤的集合java

　　form.name.$error.required app

　　form.name.$error.email ui

控制submit按鈕是否disabled 啓用ng-disabled="form.$invalid"spa

下面是驗證是否用戶名惟一的簡單寫法code

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="formTest" ng-controller="formController">
    <form name="myForm" ng-submit="show()">
        <input name="personName" required ng-model="person.name" ensure-Unique="personName"/>
        <span></span>
        <input type="submit" ng-disabled="myForm.$invalid"/>
    </form>
    <script>
        var formTest = angular.module("formTest", []);
        formTest.controller("formController", function ($scope) {
            $scope.person = {
                email: "",
                name: "Jackey"
            };
            $scope.show = function () {
                //alert($scope.person.name);
                console.log(myForm.personName.$error)
            };
        }).directive("ensureUnique", function ($http) {
            return {
                require: "ngModel",
                link: function (scope, element, attrs) {
                    scope.$watch(attrs.ngModel, function () {
　　　　　　　　　　　　　　//$http.....
                        console.log(scope.person.name);
                        element.next("span").text(scope.person.name);//顯示是否存在惟一
                    });

                }
            };
        });
    </script>
</body>
</html>

再修改一下orm

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="formTest" ng-controller="formController">
    <form name="myForm" ng-submit="show()">
        <input name="personName" required ng-model="person.name" ensure-Unique="personName"/>
        <span></span>
        <input type="submit" ng-disabled="myForm.$invalid"/>
    </form>
    <script>
        var formTest = angular.module("formTest", []);
        formTest.controller("formController", function ($scope) {
            $scope.person = {
                email: "",
                name: ""
            };
            $scope.show = function () {
                //alert($scope.person.name);
                console.log(myForm.personName.$error)
            };
        }).directive("ensureUnique", function () {
            return {
                require: "ngModel",
                link: function (scope, element, attrs) {
                    scope.$watch(attrs.ngModel, function (n) {
                        if (!n) return;
                        console.log(n);
                        element.next("span").text(scope.person.name); //顯示是否存在惟一
                    });

                }
            };
        });
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。