[angularjs] angularjs로 양식 유효성을 어떻게 확인합니까?

Program / 글쓴이

저는 angularjs를 처음 접했습니다. 내 앱에 양식이 있다고 가정 해 보겠습니다. 인스펙터를 사용하여 angularjs가 폼이 유효하지 않다고 생각하면 ng-invalid 클래스를 폼에 추가한다는 것을 알았습니다. 아름다운.

따라서 양식이 유효한지 확인하려면 Jquery 선택기로 코드를 오염시켜야하는 것 같습니다. 양식 컨트롤러를 사용하지 않고 양식 유효성을 나타내는 angularjs 방법은 무엇입니까?

답변

<form>ngApp 내부 에 태그 를 넣으면 AngularJS는 자동으로 폼 컨트롤러를 추가합니다 (실제로 form필수 동작을 추가 하는 지시문 이 있습니다). 이름 속성의 값은 범위에 바인딩됩니다. 그래서 다음과 같은 <form name="yourformname">...</form>것이 만족할 것입니다.

폼은 FormController의 인스턴스입니다. 양식 인스턴스는 선택적으로 name 속성을 사용하여 범위에 게시 할 수 있습니다.

따라서 양식 유효성을 확인하기 위해 $scope.yourformname.$valid범위 속성 값을 확인할 수 있습니다 .

양식에 대한 개발자 가이드 섹션 에서 더 많은 정보를 얻을 수 있습니다 .

답변

예

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

답변

당신은 또한 사용할 수 있습니다 myform.$invalid

예

if($scope.myform.$invalid){return;}

답변

형태

  • FormController를 인스턴스화하는 지시문 모듈의 지시문.

name 속성이 지정되면 양식 컨트롤러가이 이름으로 현재 범위에 게시됩니다.

별칭 : ngForm

Angular에서는 양식을 중첩 할 수 있습니다. 이는 모든 하위 양식이 유효 할 때 외부 양식도 유효 함을 의미합니다. 그러나 브라우저는 요소의 중첩을 허용하지 않으므로 Angular는 동일하게 작동하지만 중첩 될 수있는 ngForm 지시문을 제공합니다. 이를 통해 중첩 된 양식을 가질 수 있으며, 이는 ngRepeat 지시문을 사용하여 동적으로 생성되는 양식에서 Angular 유효성 검사 지시문을 사용할 때 매우 유용합니다. 보간을 사용하여 입력 요소의 이름 속성을 동적으로 생성 할 수 없기 때문에 ngForm 지시문에서 각 반복 입력 세트를 래핑하고 외부 양식 요소에 중첩해야합니다.

CSS 클래스

양식이 유효한 경우 ng-valid 가 설정됩니다.

양식이 유효하지 않은 경우 ng-invalid 가 설정됩니다.

ng-pristine 은 양식이 원시인 경우 설정됩니다.

양식이 더러 우면 ng-dirty 가 설정됩니다.

ng-submitted 는 양식이 제출 된 경우 설정됩니다.

ngAnimate는 추가 및 제거시 이러한 각 클래스를 감지 할 수 있습니다.

양식 제출 및 기본 조치 방지

클라이언트 측 Angular 애플리케이션에서 양식의 역할이 기존의 왕복 앱과 다르기 때문에 브라우저가 양식 제출을 서버로 데이터를 보내는 전체 페이지 다시로드로 변환하지 않는 것이 바람직합니다. 대신 애플리케이션 별 방식으로 양식 제출을 처리하기 위해 일부 자바 스크립트 로직이 트리거되어야합니다.

이러한 이유로 Angular는 요소에 작업 속성이 지정되지 않은 경우 기본 작업 (서버에 대한 양식 제출)을 방지합니다.

다음 두 가지 방법 중 하나를 사용하여 양식을 제출할 때 호출해야하는 javascript 메소드를 지정할 수 있습니다.

양식 요소에 대한 ngSubmit 지시문

제출 유형의 첫 번째 버튼 또는 입력 필드에 대한 ngClick 지시문 (input [type = submit])

핸들러의 이중 실행을 방지하려면 ngSubmit 또는 ngClick 지시문 중 하나만 사용하십시오.

이는 HTML 사양의 다음 양식 제출 규칙 때문입니다.

양식에 입력 필드가 하나만있는 경우 양식에 2 개 이상의 입력 필드가 있고 버튼이없는 경우이 필드에서 Enter 키를 누르면 양식 제출 (ngSubmit)이 input[type=submit]트리거되거나 양식에 하나 이상의 입력 필드가 있고 Enter 키를 눌러도 제출이 트리거되지 않습니다. 하나 이상의 버튼을 누르거나 input[type=submit]입력 필드에서 Enter 키를 누르면 첫 번째 버튼 또는 input[type=submit](ngClick) 의 클릭 핸들러가 트리거 되고 둘러싸는 양식 (ngSubmit)의 제출 핸들러가 트리거됩니다.

보류중인 ngModelOptions 변경 사항은 둘러싸는 양식이 제출 될 때 즉시 발생합니다. ngClick 이벤트는 모델이 업데이트되기 전에 발생합니다.

ngSubmit을 사용하여 업데이트 된 모델에 액세스하십시오.

app.js :

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

형태 :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

출처 : AngularJS : API : 양식

답변