웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
다수의 입력폼 양식을 만들고 몇 개의 요소들은 필수 나머지들은 옵션인 경우 submit 버튼은 활성 또는 비활성화일 필요가 있습니다. 이를 구현하기 위한 방법으로 ngRequired 디렉티브를 사용할 수 있습니다.
다음으로 ngDisabled 디렉티브는 해당값이 false인 경우 비활성화하여 disabled 속성을 같는 것과 같이 나타내어 줍니다.
그럼 아래 예제를 통해 회원가입을 위한 입력폼 양식을 만들어 보도록하겠습니다.
1. 이름 (필수)
2. 연락처 (선택)
3. 이메일 (필수)
4. 내용 (필수)
만약 위의 내용을 가질 입력폼을 만든다면 코드는 아래와 같이 구현이 가능합니다.
위 코드를 통하여 우리가 만들고자 하였던 입력폼이 완성되었습니다. 이 코드를 실행하면 필수 입력란이 차있는 경우 즉 입력된 경우에만 submit 버튼이 활성화됩니다. 다시말해 입력되지 않은 경우는 비활성화되어 제출되지 않습니다.
이 로직이 동작하는 원리는 아래와 같이 나타낼 수 있습니다.
1. ng-disabled 디렉티브를 선언
2. ng-disabled에 선택할 요소를 name 속성과 일치 (Ex. join)
3. 선택된 name 요소 및 하위에 위치한 required 속성을 찾아 $error 객체의 required 값을 조회
4. 저장된 값을 true, false 불리언값을 가지고 있어 true일 경우 disabled 적용
이처럼 angularJS는 복잡한 스크립트를 html 확장을 통해 매우 간단한 스크립트만으로 구현이 가능합니다. 위 코드를 순수 자바스크립트 또는 다른 라이브러리등의 언어를 사용할 경우 훨씬 복잡한 구조를 가지게 될 것이라 생각할 수 있습니다.
! ngRequired 그리고 ngDisabled
먼저 ng-required 디렉티브는 해당 엘리먼트에 선언 될 경우 입력값 등의 현재 상태를 가져와 학인할 수 있습니다. 이를 활용하여 필수 입력폼에 값이 있는지 등을 확인하는 것이 가능합니다.다음으로 ngDisabled 디렉티브는 해당값이 false인 경우 비활성화하여 disabled 속성을 같는 것과 같이 나타내어 줍니다.
그럼 아래 예제를 통해 회원가입을 위한 입력폼 양식을 만들어 보도록하겠습니다.
# 구현할 입력폼의 필드 내용
1. 이름 (필수)
2. 연락처 (선택)
3. 이메일 (필수)
4. 내용 (필수)
만약 위의 내용을 가질 입력폼을 만든다면 코드는 아래와 같이 구현이 가능합니다.
<div ng-app="ngRequiredApp" ng-controller="ngRequiredCtrl">
<form name="join">
<h3>회원가입을 위하여 아래사항을 입력하여 주세요!</h3>
<div>
<p>1. 이름(필수) : <input type="text" required /></p>
<p>2. 연락처(선택) : <input type="text" /></p>
<p>3. 이메일(필수) : <input type="email" required /></p>
<p>4. 내용(필수) : <textarea required></textarea>
</div>
<button ng-disabled="join.$error.required">Submit(제출하기)</button>
</form>
</div>
<form name="join">
<h3>회원가입을 위하여 아래사항을 입력하여 주세요!</h3>
<div>
<p>1. 이름(필수) : <input type="text" required /></p>
<p>2. 연락처(선택) : <input type="text" /></p>
<p>3. 이메일(필수) : <input type="email" required /></p>
<p>4. 내용(필수) : <textarea required></textarea>
</div>
<button ng-disabled="join.$error.required">Submit(제출하기)</button>
</form>
</div>
위 코드를 통하여 우리가 만들고자 하였던 입력폼이 완성되었습니다. 이 코드를 실행하면 필수 입력란이 차있는 경우 즉 입력된 경우에만 submit 버튼이 활성화됩니다. 다시말해 입력되지 않은 경우는 비활성화되어 제출되지 않습니다.
이 로직이 동작하는 원리는 아래와 같이 나타낼 수 있습니다.
1. ng-disabled 디렉티브를 선언
2. ng-disabled에 선택할 요소를 name 속성과 일치 (Ex. join)
3. 선택된 name 요소 및 하위에 위치한 required 속성을 찾아 $error 객체의 required 값을 조회
4. 저장된 값을 true, false 불리언값을 가지고 있어 true일 경우 disabled 적용
이처럼 angularJS는 복잡한 스크립트를 html 확장을 통해 매우 간단한 스크립트만으로 구현이 가능합니다. 위 코드를 순수 자바스크립트 또는 다른 라이브러리등의 언어를 사용할 경우 훨씬 복잡한 구조를 가지게 될 것이라 생각할 수 있습니다.
아래의 글도 찾고 계시지 않나요?