-
02 템플릿기반 폼(Template-driven Forms) 03앵귤러/04 폼(Forms) 2017. 9. 3. 13:15
app.component.ts 수정
AppComponent는 응용프로그램의 루트 컴포넌트입니다. 이것은 새로운 HeroFormComponent를 호스팅합니다.
"QuickStart"버전의 내용을 다음으로 교체하십시오:
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<hero-form></hero-form>'
})
export class AppComponent { }
두 가지 변경사항이 있습니다. 템플릿은 단순히 컴포넌트의 selector 프로퍼티로 식별되는 새 엘리먼트 태그입니다. 응용프로그램 컴포넌트가 로드될 때 영웅 폼이 표시됩니다. 또한 클래스본문에 name 필드를 넣었습니다.
초기 HTML 폼 템플릿 생성
다음 내용으로 템플릿 파일을 만듭니다.
src/app/hero-form.component.html
<div class="container">
<h1>Hero Form</h1>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
언어는 단순히 HTML5입니다. 영웅 필드인 name과 alterEgo 두 개를 제시하고 입력박스로 사용자 입력을 받습니다.
Name <input>컨트롤에 HTML5 required 어트리뷰트가 있습니다. alterEgo는 선택 사항이므로 Alter Ego <input> 컨트롤은 필수입력이 아닙니다.
하단에 Submit 버튼을 추가하였고, 이 버튼에 스타일을 지정하기 위해 클래스를 추가했습니다.
Angular를 사용하고 않았습니다. 바인딩이나 추가 디렉티브는 없으며 레이아웃 만 있습니다.
템플릿 기반 폼에서 FormsModule을 임포트한 경우 FormsModule을 사용하기 위해 <form> 태그에 아무 것도 할 필요가 없습니다. 계속해서 어떻게 작동하는지 지켜보세요.
container, form-group, form-control 및 btn 클래스는 Twitter Bootstrap에서 가져옵니다. 이 클래스들은 순수하게 장식용입니다. 부트스트랩은 폼에 약간의 스타일을 줍니다.
Angular 폼은 스타일 라이브러리를 필요로하지 않습니다.
Angular는 container, form-group, form-control, btn 클래스 또는 외부 라이브러리의 스타일을 사용하지 않습니다. 앵귤러 앱은 CSS 라이브러리를 사용 하거나 전혀 사용하지 않아도 됩니다.
스타일 트를 추가하려면 index.html을 열고 <head>에 다음 링크를 추가하십시오.
src/index.html (bootstrap)
<link rel="stylesheet"
href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
* ngFor 사용하여 능력추가
영웅은 승인된 권한의 목록에서 하나의 수퍼파워를 선택해야합니다. 그 목록을 HeroFormComponent에서 내부적으로 관리합니다.
폼에 select를 추가하고 ngFor를 사용하여 option을 파워 목록에 바인딩합니다.
Alter Ego 그룹 바로 아래에 다음 HTML을 추가하십시오.
src/app/hero-form.component.html (powers)
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
이 코드는 파워목록의 각 파워에 대해 <option> 태그를 반복합니다. pow 템플리트 입력변수는 각 반복에서 다른 파워입니다. 보간구문을 사용하여 이름을 표시합니다.
'앵귤러 > 04 폼(Forms)' 카테고리의 다른 글
02 템플릿기반 폼(Template-driven Forms) 05 (0) 2017.09.03 02 템플릿기반 폼(Template-driven Forms) 04 (0) 2017.09.03 02 템플릿기반 폼(Template-driven Forms) 02 (0) 2017.09.03 02 템플릿 기반 폼(Template-driven Forms) 01 (0) 2017.09.03 01 사용자입력 03 (0) 2017.09.03