04 리액티브 폼(Reactive Forms) 05

앵귤러/04 폼(Forms) 2017. 10. 2. 11:10

AppComponent 템플릿을 수정하여 HeroDetailComponent를 표시합니다.

src/app/app.component.ts

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

@Component({

selector: 'app-root',

template: `

<h1>Reactive Forms</h1>

<hero-detail></hero-detail>

</div>

})

export class AppComponent {}

핵심 폼 클래스에 대한 간략한 설명을 읽는 것이 도움이 될 수 있습니다.

l AbstractControl은 FormControl, FormGroup 및 FormArray의 세 가지 구체적인 폼 컨트롤 클래스의 추상 기본 클래스입니다. 그것은 공통된 행동과 프로퍼티를 제공하며, 그 중 일부는 observable 입니다.

l FormControl은 개별 폼 컨트롤의 값과 유효성 상태를 추적합니다. 입력박스 또는 셀렉터와 같은 HTML 폼 컨트롤에 해당합니다.

l FormGroup은 AbstractControl 인스턴스 그룹의 값과 유효성 상태를 추적합니다. 그룹의 프로퍼티는 하위 컨트롤을 포함합니다. 컴포넌트의 최상위 폼은 FormGroup입니다.

l FormArray는 숫자로 인덱싱 된 AbstractControl 인스턴스 배열의 값과 유효성 상태를 추적합니다.

이 가이드를 진행하면서 이 클래스에 대해 더 배우게됩니다.

AppComponent 및 HeroDetailComponent의 HTML 서식 파일에서 부트스트랩 CSS 클래스를 사용했습니다. index.html의 head에 부트스트랩 CSS 스타일시트를 추가하십시오.

index.html

이제 모든 것이 역어졌으며, 브라우저에서 다음과 같이 표시됩니다:

리노기록 리노기록