angularjs에서 폼의 유효성을 확인하려면 어떻게 해야 합니까?

angularjs에서 폼의 유효성을 확인하려면 어떻게 해야 합니까?

저는 angularjs를 잘 몰라요.내 앱에 양식이 있다고 해.인스펙터를 사용하여 angularjs가 폼이 무효라고 생각되면 폼에 ng-invalid 클래스를 추가합니다.사랑스러워.

그럼 양식이 유효한지 확인하기 위해서는 Jquery selector로 코드를 오염시켜야 하는 건가요?폼 컨트롤러를 사용하지 않고 폼의 유효성을 나타내는 angularjs 방법은 무엇입니까?

<form>, ngApp, Angular, 가 자동으로 실제로는 JS라는 지시가 ).form의 name Atribute는 Atribute와 같은 입니다.을 사용하다<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;}

형태

• 모듈 ng 디렉티브의 디렉티브는 FormController를 인스턴스화합니다.

name Atribute를 지정하면 폼컨트롤러는 이 이름으로 현재 스코프에 퍼블리시 됩니다.

별칭: ngForm

각도에서 양식을 중첩할 수 있습니다.즉, 외부 양식은 모든 자식 양식이 유효한 경우에도 유효합니다.단, 브라우저에서는 요소의 네스트를 허용하지 않기 때문에 Angular는 ngForm 디렉티브를 제공합니다.ngForm 디렉티브는 ngForm과 동일하게 동작하지만 네스트할 수 있습니다.이를 통해 중첩된 형식을 가질 수 있습니다. 이는 ngRepeat 디렉티브를 사용하여 동적으로 생성되는 형식으로 각도 검증 디렉티브를 사용할 때 매우 유용합니다.보간을 사용하여 입력 요소의 이름 속성을 동적으로 생성할 수 없으므로 반복된 입력의 각 세트를 ngForm 지시어로 랩하여 외부 양식 요소에 중첩해야 합니다.

CSS 클래스

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

형식이 비활성일 경우 ng-module 이 설정됩니다.

형식이 완전하지 않은 경우 ng-module 이 설정됩니다.

형식이 더러울 경우 ng-module이 설정됩니다.

ng-module은 폼이 전송된 경우 설정됩니다.

ngAnimate는 추가 및 삭제 시 이러한 클래스를 각각 검출할 수 있습니다.

양식 제출 및 기본 작업 금지

클라이언트측 Angular 어플리케이션에서는 폼의 역할이 기존의 라운드 트립 어플리케이션과 다르기 때문에 브라우저에서는 폼의 제출을 풀 페이지 새로고침으로 변환하여 데이터를 서버로 전송하지 않는 것이 좋습니다.대신 어플리케이션 고유의 방법으로 폼 제출을 처리하기 위해 javascript 로직이 트리거되어야 합니다.

따라서 Angular는 요소에 액션 속성이 지정되어 있지 않은 한 기본 액션(서버에 대한 양식 제출)을 방지합니다.

다음 두 가지 방법 중 하나를 사용하여 폼을 제출할 때 Javascript 메서드를 호출할 방법을 지정할 수 있습니다.

ng폼 요소에 대한 지시문 제출

ng유형제출의첫번째버튼또는입력필드의지시문을클릭합니다(input[type=input]).

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

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

양식에 입력 필드가 1개뿐인 경우 이 필드에서 Enter 키를 누르면 입력 필드가 2개 이상이고 버튼이 없는 경우 폼 제출(ngSubmit)이 트리거됩니다.input[type=submit]양식에 입력 필드가 하나 이상 있고 단추가 하나 이상 있는 경우 Enter 키를 눌러도 전송이 트리거되지 않습니다.input[type=submit]입력 필드 중 하나를 누르면 첫 번째 버튼에서 클릭 핸들러가 트리거됩니다.input[type=submit](ngClick) 및 동봉 폼(ngSubmit)의 송신 핸들러.

보류 중인 ngModelOptions 변경은 동봉된 폼이 전송되면 즉시 이루어집니다.모델이 업데이트되기 전에 ngClick 이벤트가 발생합니다.

ngSubmit을 사용하여 업데이트된 모델에 액세스할 수 있습니다.

app.filename:

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>

출처: Angular.JS: API: 폼

언급URL : https://stackoverflow.com/questions/14299834/how-do-i-check-form-validity-with-angularjs