Angular4 폼(Form) 소개와 사용방법

안녕하세요.

오늘은 Angular 4에서 Form에 대해서 간단한 설명과 사용방법을 알아보도록 하겠습니다.

폼이란?

• 일반적으로 form이란 서버에 전달하기 위한 사용자 입력 영역을 의미 합니다.
• 로그인, 회원가입 등 입력 영역에서 보통 form 엘리먼트를 사용하여 구현 합니다.

Angular 4의 폼 종류

• 템플릿 주도 검증
  - 템플릿 외부에 별도의 검증 모듈을 두지 않고 템플릿 즉, html 상에서만 검증되게 하는 방식입니다.
  - 검증 대상이 적고 단순한 검증을 수행할 때 적합한 방식 입니다.
  
  
• 모델 주도 검증 
  - 템플릿 내부에서 검증을 수행하지 않고, 컴포넌트의 외부 모듈에서 검증되게 하는 방식입니다.
  - 검증 과정이 복잡할 경우 적합한 방식 입니다.

템플릿 주도 검증에 대해서 간단한 예제코드를 통해 알아보도록 하겠습니다.

템플릿 주도 검증 예제
HTML

<!-- 템플릿 주도 검증 -->

<form #signInForm="ngForm" (submit)="submitForm()">

아이디: <input type="text" [(ngModel)]="user.userId" #userId="ngModel" name="id" minlength="2" maxlength="10" required> {{userId.valid}}, {{userId.value}} <br>

패스워드: <input type="password" [(ngModel)]="user.userPassword" #userPassword="ngModel" name="password" minlength="4" maxlength="10" required> {{userPassword.valid}}, {{userPassword.value}} <br>

이름: <input type="text" [(ngModel)]="user.userName" [ngModelOptions]="{standalone: true}">

<button type="submit" ion-button color="appBlue" [disabled]="signInForm.invalid">로그인</button>

</form>

CLASS

export class SignInPage {

user = {

id: ''

};

}

• 참조 변수는 반드시 폼 태그를 이용해야 하고 변수명 앞에 # 기호를 붙여 선언합니다.
  - <form #signInForm="ngForm">
  
  
• 검증상태를 확인하기 위해서 검증상태에 접근하기 위한 참조변수를 선언합니다. (#userId="ngModel")
  
  
• 참조변수인 userId는 입력 엘리먼트에 접근할 수 있는 변수입니다.
  
  
• input 태그의 속성으로 [(ngModel)]을 선언하고 값을 바인딩 합니다. 
  
  
• 위와 같이 폼 변수인 signInForm을 사용하여 유효값 검사를 할 수 있습니다.
  - signInForm.invalid 또는 signInForm.valid 
  
  
• 주의할점. form 태그 안에서 input 태그의 name속성을 삭제하면 에러가 발생합니다.
  폼 내부 엘리먼트로 인식이 안되기 때문입니다.
  
  
• form 태그안에서 검증을 제거할 속성에 대해서는 ngModelOptions 속성을 사용합니다. 그렇게되면 name속성을 사용하지 않고 별개의 상태를 가질 수 있습니다.
  
  
• standalone을 true로 설정하면 폼 내부에서 아이디와 패스워드 엘리먼트와 별개로 독립된 상태를 갖게 되고, 검증시 signInForm.invalid에 영향을 미치지 않습니다. 폼 검증시 standalone 설정이 돼 있는 엘리먼트는 제외하고 진행합니다.

모두 즐거운 코딩하세요~