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

설정

설정 지침에 따라 angular-forms라는 새 프로젝트를 만듭니다.

ng new angular-forms

 

영웅 모델 클래스 만들기

사용자가 폼데이터를 입력하면 변경 사항을 캡처하고 모델 인스턴스를 업데이트합니다. 모델이 어떻게 보여야 하는지 알때까지 폼을 배치 할 수 없습니다.

모델은 응용프로그램의 중요성에 대한 사실을 담고있는 "프로퍼티 가방"처럼 간단할 수 있습니다. 다음 모델은 Hero 클래스가 세 가지 필수필드(id, name, power)와 하나의 선택필드(alterEgo)를 가지고 있음을 설명합니다.

app디렉토리에 다음의 주어진 내용으로 파일을 만듭니다.

src/app/hero.ts

export class Hero {     constructor(     public id: number,     public name: string,     public power: string,     public alterEgo?: string   ) {  }   }

요구사항이 거의없고 동작이 없는 빈혈성 모델입니다. 데모에 딱 맞습니다.

TypeScript 컴파일러는 각 public 생성자 매개변수에 대한 public 필드를 생성하고 영웅을 만들 때 해당 필드에 매개변수의 값을 자동으로 할당합니다.

alterEgo는 선택사항이므로 생성자를 생략할 수 있습니다. alterEgo?에서 물음표(?)를 확인하십시오.

다음과 같이 새로운 영웅을 만들 수 있습니다:

src/app/hero-form.component.ts (SkyDog)

let myHero =  new Hero(42, 'SkyDog',                        'Fetch any object at any distance',                        'Leslie Rollover'); console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"

 

폼 컴포넌트 만들기

Angular 폼은 HTML 기반 템플릿과 프로그래밍 방식으로 데이터 및 사용자 상호 작용을 처리하는 컴포넌트 클래스의 두 부분으로 구성됩니다. 간단히 말해서 영웅 편집기가 할수 있는 일이 나와 있기 때문에 클래스로 시작합니다.

주어진 내용으로 다음 파일을 생성하십시오:

src/app/hero-form.component.ts (v1)

import { Component } from '@angular/core';   import { Hero }    from './hero';   @Component({   selector: 'hero-form',   templateUrl: './hero-form.component.html' }) export class HeroFormComponent {     powers = ['Really Smart', 'Super Flexible',             'Super Hot', 'Weather Changer'];     model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');     submitted = false;     onSubmit() { this.submitted = true; }     // TODO: Remove this when we're done   get diagnostic() { return JSON.stringify(this.model); } }

이 컴포넌트는 특별한 것이 없으며 이전에 작성한 컴포넌트와 다를것이 없습니다.

이 컴포넌트를 이해하려면 이전 페이지에서 다룬 Angular 개념만 알아도 충분합니다.

l  이 코드는 Angular 코어라이브러리와 방금 생성 한 영웅 모델을 가져옵니다.

l  @Component 선택자 값인 "hero-form"은 이 폼을 <hero-form> 태그가 있는 부모템플리트에 놓을 수 있음을 의미합니다.

l  templateUrl프로퍼티는 템플릿 HTML에 대한 별도의 파일을 가리킵니다.

l  model과 powers에 대한 더미 데이터를 데모로 정의했습니다.

길 아래에서 실제 데이터를 가져 오거나 저장하기 위해 데이터 서비스를 주입하거나 부모 컴포넌트에 바인딩하기 위해 이러한 프로퍼티를 입력 및 출력으로 노출시킬 수 있습니다 (템플릿 구문 페이지의 입력 및 출력 속성 참조). 이것은 현재 관심사가 아니며 향후 변경 사항은 폼에 영향을 미치지 않습니다.

l  모델의 JSON 표현을 리턴하는 diagnostic 프로퍼티를 추가했습니다. 개발 중에 무엇을하는지 볼 수 있습니다. 나중에 폐기하기 위해 정리 메모를 남겼습니다.

 

왜 별도의 템플릿 파일입니까?

다른 곳에서 자주하는 것처럼 컴포넌트 파일에 인라인으로 템플릿을 작성하지 않는 이유는 무엇입니까?

모든 경우에 "올바른" 대답은 없습니다. 인라인 템플릿은 짧은 경우 유용합니다. 대부분의 폼 템플릿은 짧지 않습니다. TypeScript 및 JavaScript 파일은 일반적으로 HTML을 많이 쓰거나 읽기에 적합하지 않으며 HTML과 코드가 혼합된 파일을 지원하는 에디터는 거의 없습니다.

폼 템플릿은 몇개의 필드를 표시할 때도 사이즈가 커지는 경향이 있으므로 일반적으로 HTML 템플릿을 별도의 파일에 저장하는 것이 가장 좋습니다. 잠시 후에 템플릿 파일을 작성합니다. 먼저 app.module.ts 및 app.component.ts를 수정하여 새로만든 HeroFormComponent를 사용합니다.

 

app.module.ts 수정

app.module.ts는 응용프로그램의 루트모듈을 정의합니다. 여기에서 응용프로그램에서 사용할 외부모듈을 식별하고 HeroFormComponent와 같이 이 모듈에 속한 컴포넌트를 선언합니다.

템플릿기반 폼은 자체 모듈에 있기 때문에 폼을 사용하려면 응용프로그램 모듈에 대하여 imports 배열에 FormsModule을 추가해야 합니다.

"QuickStart"버전의 내용을 다음으로 교체하십시오:

src/app/app.module.ts

import { NgModule }      from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule }   from '@angular/forms';   import { AppComponent }  from './app.component'; import { HeroFormComponent } from './hero-form.component';   @NgModule({   imports: [     BrowserModule,     FormsModule   ],   declarations: [     AppComponent,     HeroFormComponent   ],   bootstrap: [ AppComponent ] }) export class AppModule { }

 

세 가지 변경사항이 있습니다. 1.      FormsModule과 새 HeroFormComponent를 가져옵니다. 2.      FormsModule을 @NgModule 데코레이터에 정의된 imports 목록에 추가합니다. 이렇게하면 응용프로그램이 ngModel을 비롯한 모든 템플릿 기반 폼 기능에 액세스할 수 있습니다. 3.      HeroFormComponent를 @NgModule 데코레이터에 정의된 declarations 목록에 추가합니다. 이 모듈을 통해 HeroFormComponent 컴포넌트를 볼 수 있습니다.