angularJs form

16211 단어 AngularJS
form.name.$valid 유효성 여부
form.name.$무효 여부
form.name.$error 오류 집합
  form.name.$error.required 
  form.name.$error.email 
submit 단추가ng-disabled="form.$invalid를 사용하지 않도록 설정할지 여부를 조정합니다
 
다음은 사용자 이름의 유일한 간단한 쓰기 여부를 검증하는 것입니다.
<!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>

다시 수정할게요.
<!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>

좋은 웹페이지 즐겨찾기