02 템플릿 기반 폼(Template-driven Forms) 01

템플릿 기반 폼

폼

폼은 비즈니스 애플리케이션의 주류입니다. 폼을 사용하여 로그인하고, 도움요청을 제출하고, 주문하고, 항공편을 예약하고, 회의를 예약하고, 수많은 데이터 입력작업을 수행합니다.

폼을 개발할 때 작업흐름을 통해 효율적이고 효과적으로 사용자에게 안내하는 데이터 입력 환경을 만드는 것이 중요합니다.

폼을 개발하려면 양방향 데이터바인딩, 변경 추적, 유효성 검사 및 오류 처리에 대한 프레임워크 지원지원 뿐만 아니라 디자인 기술이 필요합니다.

이 페이지는 간단한 폼을 만드는 방법을 보여줍니다. 만드는 과정에 다음과 같은 방법을 배우게됩니다.

l  컴포넌트와 템플릿을 사용하여 Angular 폼을 작성

l  ngModel을 사용하여 입력 제어 값을 읽고 쓰는 양방향 데이터 바인딩을 생성

l  상태 변경 사항 및 폼 컨트롤의 유효성을 추적

l  컨트롤의 상태를 추적하는 특수 CSS 클래스를 사용하여 시각적 피드백을 제공

l  유효성 검사 오류를 사용자에게 표시하고 폼 컨트롤을 활성화 / 비활성화

l  템플릿 참조변수를 사용하여 HTML 엘리먼트 간에 정보 공유

Plunker에서 라이브 예제 / 다운로드 예제를 실행하고 거기에서 코드를 다운로드 할 수 있습니다.

 

템플릿 기반 폼

이 페이지에서는 폼 특화된 디렉티브 및 기법을 사용하여 Angular 템플릿 구문으로 템플릿을 작성하여 폼을 작성합니다.

Angular 템플릿을 사용하여 거의 모든 폼(로그인 폼, 계약 폼 및 거의 모든 비즈니스 폼)을 작성할 수 있습니다. 컨트롤을 창의적으로 레이아웃하고, 데이터에 바인딩하고, 유효성 검사 규칙을 지정하고 유효성 검사 오류를 표시하고, 특정 컨트롤을 조건부로 활성화 또는 비활성화하고, 내장 된 시각적 피드백을 트리거하는 등의 작업을 수행 할 수 있습니다.

Angular를 사용하면 자신과 씨름해야할 반복적이고 일상작업을 쉽게 처리 할 수 ​​있습니다.

다음과 같은 템플릿 기반 폼을 작성하는 방법을 배웁니다.

영웅 고용 대행사는 이 폼을 사용하여 영웅에 관한 개인 정보를 관리합니다. 모든 영웅은 일자리가 필요합니다. 올바른 영웅과 올바른 위기를 매핑하는는 것이 회사의 사명입니다.

이 폼의 세 필드 중 두 개가 필요합니다. 필수입력란은 쉽게 찾을수 있도록 왼쪽에 녹색 막대가 있습니다.

영웅 이름을 삭제하면 폼에 주의를 끌도록 스타일의 유효성검사 오류를 표시합니다.

Submit 버튼이 비활성화되고 입력컨트롤의 왼쪽에 있는 "필수" 막대가 녹색에서 빨간색으로 변경됩니다.

이 폼을 작은 단계로 나누어 작성합니다.

1.      hero 모델 클래스를 생성

2.      폼을 제어하는 ​​컴포넌트를 생성

3.      초기 폼 레이아웃으로 템플릿을 생성

4.      ngModel 양방향 데이터 바인딩 구문을 사용하여 각 폼컨트롤에 데이터 프로퍼티를 바인딩

5.      각 폼입력 컨트롤에 name 어트리뷰트 추가

6.      사용자 정의 CSS를 추가하여 시각적 피드백을 제공

7.      유효성 검사 오류 메시지를 표시하기/감추기

8.      ngSubmit으로 폼 제출을 처리

9.      폼이 유효 할 때까지 양식의 제출 버튼을 비활성화