04 리액티브 폼(Reactive Forms) 04

리액티브 폼 컴포넌트 만들기

app 디렉토리에 hero-detail.component.ts라는 새 파일을 만들고 다음 기호를 가져옵니다.

src/app/hero-detail.component.ts

import { Component }              from '@angular/core'; import { FormControl }            from '@angular/forms';

이제 HeroDetailComponent 메타 데이터를 지정하는 @Component 데코레이터를 입력하십시오.

src/app/hero-detail.component.ts (excerpt)

@Component({     selector: 'hero-detail',     templateUrl: './hero-detail.component.html'   })

그런 다음 FormControl을 사용하여 HeroDetailComponent 클래스를 만듭니다. FormControl은 FormControl 인스턴스를 직접 만들고 관리 할 수있는 디렉티브입니다.

src/app/hero-detail.component.ts (excerpt)

export class HeroDetailComponent1 {     name = new FormControl();   }

여기서는 name이라는 FormControl을 생성합니다. 템플릿에서 영웅 이름의 HTML 입력박스에 바인딩됩니다.

FormControl 생성자는 초기 데이터 값, 유효성 검사기 배열 및 비동기 유효성 검사기 배열과 같은 선택적 인수를 사용할 수 있습니다.

이 간단한 컨트롤에는 데이터나 유효성 검사기가 없습니다. 실제 앱에서는 대부분의 폼 컨트롤이 둘 다 있습니다.

 

템플릿 만들기

이제 내용과 같이 컴포넌트의 템플릿 src/app/hero-detail.component.html을 만듭니다.

src/app/hero-detail.component.html

<h2>Hero Detail</h2> <h3><i>Just a FormControl</i></h3> <label class="center-block">Name:   <input class="form-control" [formControl]="name"> </label>

Angular가 클래스의 name FormControl에 연결하려는 입력임을 알리려면 <input>의 템플릿에 [formControl] = "name"이 필요합니다.

form-control CSS 클래스는 부트 스트랩 CSS 라이브러리에 속하며 Angular는 아닙니다. 폼을 장식하지만 폼의 로직에는 아무런 영향을 미치지 않습니다.

 

ReactiveFormsModule 임포트

HeroDetailComponent 템플릿은 ReactiveFormsModule의 formControlName 디렉티브를 사용합니다.

이 샘플에서는 AppModule에 HeroDetailComponent를 선언합니다. 따라서 app.module.ts에 다음 세 가지 작업을 수행하세요.

1.      ReactiveFormsModule 및 HeroDetailComponent에 액세하기 위해 JavaScript import 문을 사용합니다.

2.      ReactiveFormsModule을 AppModule의 imports 목록에 추가합니다.

3.      declarations 배열에 HeroDetailComponent를 추가합니다.

src/app/app.module.ts (excerpt)

import { NgModule }            from '@angular/core'; import { BrowserModule }       from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module   import { AppComponent }        from './app.component'; import { HeroDetailComponent } from './hero-detail.component'; // <-- #1 import component   @NgModule({   imports: [     BrowserModule,     ReactiveFormsModule // <-- #2 add to @NgModule imports   ],   declarations: [     AppComponent,     HeroDetailComponent, // <-- #3 declare app component   ],   bootstrap: [ AppComponent ] }) export class AppModule { }