2014-12-21 2 views
1

나는 새로운 각도의 사용자이고 양식에 대한 유효성 검사를 시도하고 있습니다. 여기 예를 발견 http://plnkr.co/edit/gLDFaf?p=previewAngularjs : ng-class 및 양식 유효성 검사

그것은 내가 "엄격한 사용"추가하면 그렇게 검증 (빨간색 테두리) 내 문제 : 내가 이해하지 못하는 어떤 작동하지 않는 이유 ... 원하는 정확히 무엇; script.js

"use strict"; // <-- validation doesn't work if removed 
module = angular.module('app', []); 

module.controller('NewUserController', function($scope) { 
    $scope.save = function() { 
    if ($scope.userForm.$valid) { 
     alert('User saved'); 
     $scope.reset(); 
    } else { 
     alert("There are invalid fields"); 
    } 
    }; 

    $scope.reset = function() { 
    $scope.user = { name: '', email: '' }; 
    } 
}); 

의 상단과보기에 :

<body ng-app="app" ng-controller="NewUserController"> 
    <h1>Add New User</h1> 
    <form name="userForm" novalidate> 
     <div class="form-group" ng-class="{ 'has-error': userForm.name.$invalid }" > 
     <label class="control-label">Name</label> 
     <input type="text" class="form-control" name="name" ng-model="user.name" required placeholder="Name" /> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error': userForm.email.$invalid }" > 
     <label class="control-label">Email</label> 
     <input type="email" class="form-control" name="email" ng-model="user.email" required placeholder="Email" /> 
     </div> 
     <button class="btn btn-primary" ng-click="save()">Add User</button> 
     <button class="btn btn-link" ng-click="reset()">Reset</button> 
    </form> 
    </body> 

누군가가 나를 설명 할 수 :)

감사합니다!

답변

1

브라우저의 콘솔을 보면 JS 코드가 실제로 충돌하고 JS 코드가 활성화되지 않은 것을 볼 수 있습니다. 앵귤러 유효성 검사가 없으므로 양식이 표준 HTML 동작으로 제출됩니다.

JS가 충돌하는 이유는 엄격 모드에서 전역 변수를 만들 수 없기 때문입니다. module 변수는 일반적으로 글로벌 변수가되는 var 문없이 선언됩니다. var 문을 추가하면 코드가 작동합니다.

"use strict"; 
var module = angular.module('app', []); // The variable is properly defined 

당신은 여기에서 자세한 정보를 찾을 수 있습니다 시작 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Converting_mistakes_into_errors

+0

plunker 업데이트 완벽한, 덕분에 많은 plunker에 대한 – Julien

0

추가 VAR을

var app = angular.module('app', []); 

app.controller('NewUserController', function($scope) { 

체크

+0

덕분에, 좋은. – Julien

+0

대답이 도움이 되었습니까? – harishr