-
02 템플릿기반 폼(Template-driven Forms) 05앵귤러/04 폼(Forms) 2017. 9. 3. 13:28
시각적 피드백을위한 맞춤 CSS 추가
입력란 왼쪽의 색상막대를 사용하여 필수입력란과 잘못된 데이터를 동시에 표시할 수 있습니다.
이러한 클래스 정의를 프로젝트에 추가한 새 forms.css 파일을 index.html파일이 있는 폴더에 추가하여 이 효과를 얻을 수 있습니다.
src/forms.css
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
이 스타일시트를 포함하도록 index.html의 <head>를 수정하십시오.
src/index.html (styles)
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="forms.css">
유효성 검사 오류 메시지 표시 및 숨기기
폼을 개선할 수 있습니다. 이름 입력박스가 필수입력이며 내용을 지우면 막대가 빨간색으로 바뀝니다. 그것은 무엇인가 잘못되었다고 말하지만 사용자는 무엇이 잘못되었는지 무엇을 해야할지 모릅니다. 컨트롤의 상태를 활용하여 유용한 메시지를 표시하도록 합니다.
사용자가 이름을 삭제하면 폼은 다음과 같이 표시됩니다.
이 효과를 얻기위해 <input> 태그를 다음과 같이 확장하십시오.
l 템플릿 참조 변수 추가
l <div>에 "is required"메시지를 추가합니다. 이 메시지는 컨트롤이 유효하지 않은 경우에만 표시합니다.
다음은 이름 입력박스에 추가된 오류 메시지의 예입니다.
src/app/hero-form.component.html (excerpt)
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>
템플릿 내에서 입력박스의 Angular 컨트롤에 액세스하려면 템플릿 참조변수가 필요합니다. 여기서는 name이라는 변수를 생성하고 "ngModel"값을 부여했습니다.
왜 "ngModel"인가? 디렉티브의 exportAs 프로퍼티는 참조변수를 디렉티브에 연결하는 방법을 Angular에게 알려줍니다. ngModel 디렉티브의 exportAs 프로퍼티는 "ngModel"이므로 ngModel에 name을 설정합니다.
name 컨트롤의 프로퍼티를 메시지 <div> 엘리먼트의 hidden프로퍼티에 바인딩하여 이름 오류 메시지의 가시성을 제어합니다.
src/app/hero-form.component.html (hidden-error-msg)
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
이 예제에서는 컨트롤이 유효하거나 원시상태인 경우 메시지를 숨깁니다. "pristine"은 값이 폼에 표시된 이후에 사용자가 변경하지 않았음을 의미합니다.
이런 사용자 경험은 개발자의 선택입니다. 일부 개발자는 항상 메시지를 표시하려고 합니다. pristine 상태를 무시하면 값이 유효한 경우에만 메시지를 숨길 수 있습니다. 새로운 영웅 또는 유효하지 않은 영웅이 컴포넌트에 도착하면 어떤 행위를 하기도 전에 즉시 오류 메시지가 표시됩니다.
일부 개발자는 사용자가 잘못된 변경을 한 경우에만 메시지를 표시하려고 합니다. 컨트롤이 "pristine"인 동안 메시지를 숨기면 그렇게 할 수 있습니다. 새로운 영웅을 추가할 때 이 선택의 중요성을 알 수 있습니다.
영웅 Alter Ego는 선택사항이므로 그대로 둘 수 있습니다.
영웅의 파워선택은 필수입력입니다. 원하는 경우 <select>에 동일한 종류의 오류 처리를 추가할 수 있지만 선택박스가 이미 유효한 값으로 파워를 제한하기 때문에 반드시 수행해야하는 것은 아닙니다.
이제 이 폼에 새로운 영웅을 추가할 것입니다. 새 Hero 버튼을 폼의 맨 아래에 놓고 click 이벤트를 newHero 컴포넌트 메서드에 바인딩합니다.
src/app/hero-form.component.html (New Hero button)
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
src/app/hero-form.component.ts (New Hero method)
newHero() {
this.model = new Hero(42, '', '');
}
응용프로그램을 다시 실행하고 New Hero 버튼을 클릭하면 폼이 지워집니다. 입력박스 왼쪽에 필수표시 막대가 빨간색으로 표시되어 잘못된 name 및 power 프로퍼티를 나타냅니다. 이것이 필수입력란 이라는 것을 알 수 있습니다. 폼이 원시상태이면 오류 메시지가 사라집니다
이름을 입력하고 New Hero를 다시 클릭하십시오. 앱에 “Name is required” 오류 메시지가 표시됩니다. 새로운(빈) 영웅을 만들 때는 오류메시지를 원하지 않습니다.
브라우저 도구에서 엘리먼트를 검사하면 이름 입력박스가 더 이상 원시 상태가 아님을 알 수 있습니다. 폼은 New Hero를 클릭하기 전에 이름을 입력했음을 기억합니다. 영웅 개체를 교체할 때 폼컨트롤을 초기 상태로 복원하지 않았습니다.
반드시 모든 플래그를 지워야합니다. 이 플래그는 newHero() 메서드를 호출한 후 폼의 reset()메서드를 호출하여 수행할 수 있습니다.
src/app/hero-form.component.html (Reset the form)
<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
이제 "New Hero"를 클릭하면 폼과 컨트롤플래그가 모두 재설정됩니다.
'앵귤러 > 04 폼(Forms)' 카테고리의 다른 글
03 폼 유효성검사 01 (0) 2017.09.24 02 템플릿기반 폼(Template-driven Forms) 06 (0) 2017.09.03 02 템플릿기반 폼(Template-driven Forms) 04 (0) 2017.09.03 02 템플릿기반 폼(Template-driven Forms) 03 (0) 2017.09.03 02 템플릿기반 폼(Template-driven Forms) 02 (0) 2017.09.03
