AngularJS에서 양식 기반 지시를 만드는 방법

코어 포인트

angularjs 지시 사항을 사용하여 재사용 가능한 양식 구성 요소를 만듭니다.

복잡한 입력 검증을 처리하기 위해 지침에서 사용자 정의 검증 방법을 구현하여 서버에 제출되기 전에 데이터 무결성을 보장합니다.

angularjs 내장 양식 검증 기술 (예 :
• 및
• angularjs에서
를 사용하여 양식 상태 및 확인을 관리하여 사용자에게 즉각적인 피드백을 제공하고 사용자 경험을 향상시킵니다.
• ng-required ng-pattern 지침을 사용하여 angularjs의 양식 제출을 처리하고 기본 제출 동작을 차단하고 서버로 데이터를 보내기 전에 사용자 정의 확인 로직을 활성화하십시오.
• 많은 개발자들은 사용자가 제출 한 데이터에 대한 복잡한 비즈니스 제약을 실행할 때 고유 한 과제에 직면 해 있습니다. 최근에 우리 팀은 GiftCards.com에서 응용 프로그램을 작성할 때이 도전에 직면했습니다. 고객이 각각 고유 한 검증 규칙으로 한 관점에서 여러 제품을 편집 할 수있는 방법을 찾아야합니다. FormController 이것은 HTML 소스 코드에서 여러 태그를 사용하고 각 양식 인스턴스에 대한 유효성 검사 모델을 유지해야하기 때문에 도전적입니다. 솔루션을 찾기 전에
• 를 사용하여 하위 형태를 표시하는 것과 같은 많은 방법을 시도했습니다. 마지막으로, 우리는 각 제품 유형에 대한 지침을 만듭니다 (각 지시문은 ng-submit가 있습니다). 이를 통해 Angular의 부모-자식 양식 상속을 활용하여 모든 아동 양식이 유효 한 경우에만 부모 양식이 유효 할 수 있습니다. 이 튜토리얼에서는 간단한 제품 검토 화면 (현재 응용 프로그램의 주요 구성 요소를 강조 표시)을 작성합니다. 우리는 각각 고유 한 지침을 갖춘 두 가지 제품을 갖게되며 각 제품에는 고유 한 검증 규칙이 있습니다. 간단한 체크 아웃 버튼이 있으므로 두 양식 모두 유효합니다.
실제로 어떻게 작동하는지보고 싶다면 데모로 직접 점프하거나 GitHub 저장소에서 코드를 다운로드 할 수 있습니다.

명령에 대한

<form></form> 지시문은 AngularJS의 HTML 컴파일러 ()를 통해 실행되고 DOM에 연결된 HTML 코드의 조각입니다. 컴파일러는 DOM을 가로 지르고 다른 등록 지시서를 사용하여 객체로 변환 할 수있는 구성 요소를 찾는 데 책임이 있습니다. 지시문은 고립 된 범위 내에서 작동하며 자신의 견해를 유지합니다. 응용 프로그램 전체에서 공유 할 수있는 재사용 가능한 구성 요소를 용이하게하는 강력한 도구입니다. 빠른 검토를 보려면이 기사 또는 AngularJS 문서를 확인하십시오. ngRepeat

지시문은 우리의 기본 문제를 두 가지 방법으로 해결합니다. 첫째, 각 인스턴스에는 고립 된 범위가 있습니다. 두 번째로, 서명기는 앵글 ngForm 지시를 사용하여 양식 요소를 인식합니다. 이 내장 지침을 사용하면 여러 중첩 형식 요소가 name에 대한 선택적 FormController 속성을 ​​수락하고 양식 개체를 반환 할 수 있습니다.

FormController에 대한

> 컴파일러가 DOM에서 어떤 형태의 객체를 인식 할 때, 지시문을 사용하여 a 객체를 인스턴스화합니다. 이 컨트롤러는 모든 입력, 선택 및 텍스트 영역 요소를 스캔하고 해당 컨트롤을 생성합니다. 컨트롤은 양방향 데이터 바인딩을 설정하기 위해 모델 속성이 필요하며 다양한 사전 제작 된 검증 방법을 통해 즉각적인 사용자 피드백을 허용합니다. 소비자에게 즉각적인 피드백을 제공하여 HTTP 요청을하기 전에 유효한 정보를 알 수 있습니다.

사전 제작 된 검증 메소드 ngForm FormController 각도 패키지 14 표준 검증 방법. 여기에는 ,

,

및 기타 유효성 검사기가 포함됩니다. 그들은 거의 모든 HTML5 입력 유형을 이해하고 조작하도록 만들어졌으며 크로스 브라우저 호환입니다. 위의 예는 각도에서

지시 유효성 검증기를 사용하는 방법을 보여줍니다. 이 검증은 필드가 유효한 것으로 간주되기 전에 필드에 채워 지도록합니다. 데이터를 확인하지 않고 사용자가 무언가를 입력합니다. 속성을 ​​갖는 것은 제출시 브라우저가 확인해서는 안된다는 것을 의미합니다.

min pro 팁 : 각도 형태로 max 속성을 ​​설정하지 마십시오. 이렇게하면 앵귤러가 양식이 왕복 방식으로 제출되지 않도록 노력하지 못하게됩니다. required

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

사용자 정의 검증 메소드

ngRequired Angular는 사용자 정의 검증 규칙을 만드는 데 도움이되는 광범위한 API를 제공합니다. 이 API를 사용하면 표준 유효성 검사에서 다루지 않은 복잡한 입력에 대한 자체 유효성 검사 규칙을 작성하고 확장 할 수 있습니다. 우리 팀은 서버가 사용하는 복잡한 정규 표현 패턴을 실행하기 위해 몇 가지 사용자 정의 검증 방법에 의존합니다. 복잡한 정규 표현식 매칭을 실행할 수 없으면 잘못된 데이터를 백엔드 서버로 보낼 수 있습니다. 이렇게하면 사용자에게 오류가 표시되어 사용자 경험이 나빠집니다. 사용자 정의 유효성 검사기는 지시문 구문을 사용하며 novalidate를 주입해야합니다. 자세한 내용은 AngularJS 문서를 컨설팅하여 찾을 수 있습니다.

컨트롤러를 만듭니다

이제 응용 프로그램을 시작할 수 있습니다. 여기에서 컨트롤러 코드의 개요를 찾을 수 있습니다. action 컨트롤러는 사물의 중심에있을 것입니다. 그것은 몇 가지 책임이 있습니다. 그보기는 라는 양식 요소를 가지고 있으며, 하나의 속성 만 가지고 있으며, 그 방법에는 ,

및

가 포함됩니다.

컨트롤러 속성 컨트롤러에 속성이 필요합니다

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

이 속성은 양식의 전반적인 유효성의 부울 상태를 유지하는 데 사용됩니다. 우리는이 속성을 사용하여 체크 아웃 버튼을 클릭 한 후 상태를 비활성화합니다.

메소드 : regis

가 호출되면 a 및 명령 인스턴스화에서 생성 된 고유 한 지침 ID가 전달됩니다. 이 방법은 양식 범위를 부모 에 추가합니다.

메소드 : ValidAteChildForm

<code class="language-javascript">$scope.formsValid = false;</code>

이 메소드는 확인을 수행하는 백엔드 서버와 조정하는 데 사용됩니다. 사용자가 컨텐츠를 편집 할 때 호출되며 추가 확인이 필요합니다. 개념적으로, 우리는 외부 커뮤니케이션을 수행하도록 지시를 허용하지 않습니다.

이 튜토리얼의 목적 상, 백엔드 구성 요소를 생략했습니다. 대신, 사용자가 입력 한 금액이 특정 범위 내에 있는지 여부에 따라 약속을 거부하거나 구문 분석합니다 (제품 A는 10-50이고 제품 B는 25-500). registerFormScope FormController 서비스를 사용하면 성공 및 실패 상태가있는 인터페이스를 준수 할 수 있습니다. "편집"과 "저장"사이의 응용 프로그램 인터페이스의 특성은 모델 데이터의 편집에 따라 다릅니다. 사용자가 입력을 시작할 때 모델 데이터가 즉시 업데이트된다는 점에 유의해야합니다. FormController 메소드 : 체크 아웃

"체크 아웃"을 클릭하여 사용자가 편집을 완료했으며 체크 아웃을 원한다는 것을 나타냅니다. 이 실행 가능한 항목은 모델 데이터가 서버로 전송되기 전에 지침에로드 된 모든 양식이 검증되도록 검증해야합니다. 이 기사의 범위에는 데이터를 서버로 전송하는 방법이 포함되어 있지 않습니다. 모든 클라이언트 대 서버 커뮤니케이션을 위해

서비스를 사용하여 탐색하는 것이 좋습니다. 이 방법은 Angular의 능력을 사용하며 자식 형태는 부모 형태를 무효화 할 수 있습니다. 부모 양식은 라는 이름으로, 아동 형태와의 관계를 명확하게 설명합니다. 자식 양식이

메소드를 사용하면 자동으로 부모 형태로 올라가서 유효성을 설정합니다. 의 모든 양식은 유효해야하며 내부

속성은 사실이어야합니다.

우리의 지침을 만듭니다

우리의 지침은 전체 상호 운용성과 확장 성을 허용하는 일반적인 인터페이스를 따라야합니다. 우리의 지침의 이름은 포함 된 제품에 따라 다릅니다.

<code class="language-javascript">$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};</code>

여기에서 명령 코드 (제품 A) 및 여기 (제품 B)의 개요를 찾을 수 있습니다.

$q 격리 명령의 범위

각각의 인스턴스형 지침은 지침에 국한되어 있고 외부 속성이 알려지지 않은 고립 된 범위를 얻을 수 있습니다. 그러나 AngularJS를 사용하면 부모의 범위 방법과 속성을 사용하는 지침을 만들 수 있습니다. 외부 속성을 로컬 범위로 전달할 때 양방향 데이터 바인딩을 설정하려는 것을 나타낼 수 있습니다. 우리의 응용 프로그램에는 외부 양방향 데이터 바인딩 방법 및 속성이 필요합니다.

메소드 : registerformscope 지침 지역 범위의 첫 번째 속성은 로컬 범위를 컨트롤러에 등록하는 방법입니다. 이 명령은 파이프 라인이 로컬

객체를 기본 컨트롤러로 전달해야합니다.

객체 : GiftData

이것은 명령보기에 사용될 중앙 집중식 모델 데이터입니다. 이 정보는 양방향 데이터 바인딩이되어

에서 발생하는 업데이트가 기본 컨트롤러로 전파되도록합니다.

메소드 : validAteChildForm 이 방법은 컨트롤러에 정의 된 방법과 동일합니다. 이 방법은 사용자가 명령어보기에서 정보를 업데이트 할 때 호출됩니다. FormController 객체 : 제품 이 개체에는 구매중인 제품에 대한 정보가 포함되어 있습니다. 우리의 데모는 속성이 몇 개있는 비교적 작은 물체를 사용합니다. 우리 팀의 실제 응용 프로그램에는 응용 프로그램에서 결정을 내릴 수있는 많은 정보가 있습니다. 확인되는 컨텐츠의 컨텍스트를 제공하기 위해 로 전달됩니다.

명령어 링크

우리의 지침은 함수를 사용하여 스코프 객체를 전달합니다. 또한 함수는 다른 여러 매개 변수도 허용합니다. 그것들은 다음과 같습니다.

- 각 지침 인스턴스에 대해 생성 된 분리 범위에 액세스하는 데 사용됩니다.

- 요소 항목에 액세스하는 데 사용됩니다. 할당 된 요소 내의 validateChildForm 함수에서 요소를 업데이트하고 수정하는 것이 안전합니다.

- 인스턴스화 지침의 동일한 태그에서 속성에 액세스하는 데 사용됩니다. - 외부 컨트롤러 종속성이 존재하면 링크 함수에 사용할 수 있습니다. 이들은 지침 객체의 속성에 해당해야합니다.

-이 함수는 명령어 객체의

매개 변수에 나열된 함수와 동일합니다. postLink postLink 모든 DOM 리스너를 첨부하고보기 요소로 DOM을 업데이트 할 책임이 있습니다.

레지스터 양식 스코프
1. scope 랩핑 메소드
in
2. 는 실행 스택이 끝날 때까지 실행을 지연시킵니다. 이는 컴파일러에게 컨트롤러와 지침간에 필요한 모든 링크를 완료하기에 충분한 시간을 제공합니다. 는 에있는 속성의 이름 인 배열이며, 이는 서버 측 확인 오류를 설정하는 데 매우 중요합니다. iElement의 목적은 postLink를 상위 컨트롤러로 보내는 것입니다. 새로 생성 된 양식을 의 어린이 형식으로 설정할 수 있습니다.
3. 검증 정보가 변경 될 때 iAttrs 양식이 변경되고 사용자가 확인할 준비가되면 지시문의
메소드가 호출됩니다. 이 메소드는 컨트롤러의
4. 메소드를 차례로 호출하고 , controller로 전달됩니다. 컨트롤러는 다른 검증 규칙에 따라 구문 분석하거나 거부 할 약속을 반환합니다. require 약속이 거부되면 컨트롤러는 유효하지 않은 필드를 반환합니다. 이는 양식 (및

   )을 무효화하고 다른 필드 레벨 오류를 설정하는 데 사용됩니다. 데모에서는 parentForm 필드에서 간단한 후 검사를 사용하며 실패의 원인을 반환하지 않습니다. amount의 거부는 응용 프로그램이 필요로하는 것만 큼 복잡하거나 간단 할 수 있습니다. validateChildForm 약속이 성공적으로 반환되면 명령은 형식의 필드의 유효성을 설정해야합니다. 코드는 또한 이전에 식별 된 서버 오류를 지우야합니다. 이렇게하면 지침이 사용자에게 잘못된 오류를 제공하지 않도록합니다. 모든 서브 형태가 유효하다면

   로 모든 필드를 설정하면 컨트롤러의

   에 연결되어 유효성을 설정합니다. $setValidity parentForm 우리의 견해를 설정

   보기는 그다지 복잡하지 않으며, 시연을 위해 우리는 제품을 다음 분야로 단순화했습니다 : 이름과 금액. 다음 단계에서는이 응용 프로그램을 완료하는 데 필요한 견해를 살펴 보겠습니다. 여기에서보기 코드 (제품 A) 및 여기 (제품 B)의 개요를 찾을 수 있습니다. 경로보기

   이보기는 부모 양식을 설정하기 때문에 중요합니다.이보기는 제품 지시문에서로드 된 모든 아동 양식을 래핑하는 데 사용됩니다.

   in

   를 사용하면 DOM이 미사용 로 잘못 채워지지 않도록합니다. 명령보기

참고 : 데모 레이아웃에 대한 위의보기는 일부 장소에서 잘 렸으며이 기사와 관련이 없습니다.

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

위의 는 angular의 ng-repeat 검증기에 의해 시행되는 검증 모드를 설정합니다. 위의 필드는 각도에 의해 구축 된 ng-if 지시문을 사용하여 표현식을 평가하고, 사실이라면 필드는 비활성화됩니다. FormController 뷰 하단에는 사용자가 "저장"버튼을 클릭 할 때 사용자에게 피드백을 제공하기 위해 모든 오류가 표시됩니다. 이렇게하면 하위 형태에 속성이 설정됩니다.

요약

모든 조각을 합치면 다음으로 끝납니다. (Codepen Link 또는 Code Snippet을 여기에 삽입해야합니다. Github에서 모든 코드를 찾을 수도 있습니다. 결론

<code class="language-javascript">$scope.formsValid = false;</code>

우리 팀은 최신 앱을 구축 할 때 많은 것을 배웠습니다. 아버지 아들 형태 관계를 이해하면 의견 화면을 단순화 할 수 있습니다. 지침을 사용하면 어떤 상황에서도 사용할 수있는 양식을 개발하고 재사용 가능한 코드를 홍보 할 수 있습니다. 이 지침을 통해 우리는 코드를 단위 테스트하여 양식이 예상대로 작동하는지 확인할 수 있습니다. 우리의 응용 프로그램은 생산 중이며 10 만 명 이상의 주문에 기여했습니다.

이 기사를 읽는 것이 즐거웠기를 바랍니다. 질문이나 의견이 있으시면 아래 의견에서 듣고 싶습니다.

Angularjs의 양식 기반 지시에 대한

FAQ AngularJS에서 형태 기반 지시의 역할은 무엇입니까?

Angularjs의 양식 기반 지침은 양식의 사용자 입력을 관리하고 검증하는 데 중요한 역할을합니다. 새로운 사용자 정의 위젯 역할을하는 사용자 정의 HTML 태그를 만들 수있는 방법을 제공합니다. 또한 응용 프로그램에 기능을 추가하는 방식으로 DOM을 조작 할 수 있습니다. 이 지침은 애플리케이션 전반에 걸쳐 일반적인 기능을 캡슐화하고 재사용하려는 경우 특히 유용합니다.

angularjs에서 사용자 정의 양식 기반 지침을 만드는 방법은 무엇입니까?

AngularJS에서 사용자 정의 양식 기반 지시문을 작성하려면 함수를 사용하여 새로운 지침을 정의하는 것이 포함됩니다. 지시문에 지침의 옵션 개체를 생성하는 이름과 공장 함수를 지시해야합니다. 이 객체는 , ,

, 등을 포함한 여러 속성을 정의 할 수 있습니다.

옵션은 HTML에서 지시문이 호출되는 방법을 지정하는 데 사용됩니다.

angularjs 지침을 사용하여 양식 입력을 확인하는 방법은 무엇입니까?

AngularJS는 , , , 등을 포함하여 양식 검증에 대한 내장 지침을 제공합니다. 이 지침은 양식 입력에 유효성 검사를 추가하여 양식을 제출하기 전에 사용자 입력이 특정 기준을 충족하도록합니다. 보다 복잡한 검증 요구 사항에 대한 사용자 정의 검증 지침을 만들 수도 있습니다. .directive AngularJS에서 FormController의 목적은 무엇입니까? restrict Angularjs의 > template 는 양식 및 제어 상태를 추적하고 유효성을 확인하고 양식을 재설정하는 방법을 제공합니다. 양식 지침 내에서 자동으로 제공되며 컨트롤러, 기타 지침 또는 서비스에 주입 할 수 있습니다. scope angularjs에서 ng-submit 지시를 사용하는 방법은 무엇입니까? link AngularJS의 restrict 지침을 사용하면 양식을 제출할 때 사용자 정의 동작을 지정할 수 있습니다. 를 사용하여 양식의 제출 이벤트를 처리하기 위해 JavaScript 코드를 작성하는 대신. 이는 양식이 유효하지 않은 경우 기본 양식 제출 동작을 방지 할 때 특히 유용합니다.

angularjs에서 형태와 ng- 형식의 차이점은 무엇입니까?

in 에서 의 주요 차이점은 다른 형태로 ng-required가 중첩 될 수 있다는 것입니다. 이를 통해 관련 입력을 함께 그룹화하여 하위 형태로 검증 할 수 있습니다. 반면에 표준 ng-pattern 지침은 중첩을 지원하지 않습니다. ng-minlength angularjs에서 양식 필드의 유효성을 설정하는 방법은 무엇입니까? ng-maxlength 당신은 에 의해 제공된

메소드를 사용하여 Angularjs에서 양식 필드의 유효성을 설정할 수 있습니다. 이 메소드는 두 가지 매개 변수, 즉 유효성 검사 키와 부울 값을 허용합니다. 부울 값이 False 인 경우 키는 필드의 angularjs 형태에서 ng-model 지시문을 사용하는 방법은 무엇입니까?

angularjs의

지침은 입력, 선택, 텍스트 영역 또는 사용자 정의 양식 컨트롤을 스코프의 속성에 바인딩합니다. 모델과 뷰 사이에 양방향 데이터 바인딩을 제공합니다. 즉, 입력 필드의 변경 사항은 모델을 자동으로 업데이트하고 그 반대도 마찬가지입니다. ng-model AngularJS 형태에서 NG-Change 지시문의 역할은 무엇입니까?

AngularJS의

지침을 사용하면 사용자가 입력을 변경할 때 사용자 정의 동작을 지정할 수 있습니다. 이 지침은 사용자가 양식을 제출하기를 기다리는 대신 입력 또는 선택을 완료 한 직후에 무언가를 수행하려는 경우 유용합니다.

AngularJS에서 사용자 정의 검증 지시를 만드는 방법은 무엇입니까?

AngularJS에서 사용자 정의 검증 지시서를 작성하려면 가 필요한 새로운 지침을 정의하는 것이 포함됩니다. 지침의 함수에서 ng-change 또는 파이프 라인을 사용하여 사용자 정의 유효성 검사 로직을 추가 할 수 있습니다.

위 내용은 AngularJS에서 양식 기반 지시를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!