04 리액티브 폼(Reactive Forms) 06

FormGroup 추가

일반적으로 FormControl이 여러 개인 경우 부모 FormGroup 안에 등록해야 합니다. 이것은 간단합니다. FormGroup을 추가하려면 hero-detail.component.ts의 imports 섹션에 추가합니다:

src/app/hero-detail.component.ts

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

클래스에서 다음과 같이 heroForm이라는 FormGroup안에 FormControl을 추가합니다.

src/app/hero-detail.component.ts

export class HeroDetailComponent {       heroForm = new FormGroup({           name: new FormControl()       });   }

클래스를 변경 했으므로, 이제 템플릿에 반영해야합니다. hero-detail.component.html을 다음과 같이 수정합니다.

src/app/hero-detail.component.html

<h2>Hero Detail</h2> <h3><i>Just a FormControl</i></h3> <form [formGroup]="heroForm" novalidate>     <div class="form-group">         <label class="center-block">Name:             <input class="form-control" formControlName="name">         </label>     </div> </form>

이제 단일 입력이 폼 엘리먼트에 있음을 알 수 있습니다. <form>엘리먼트의 novalidate 어트리뷰트는 브라우저가 원시 HTML 유효성 검사를 시도하지 못하게 합니다.

formGroup은 기존 FormGroup 인스턴스를 가져와서 HTML 엘리먼트와 연결시키는 리액티브 폼 디렉티브입니다. 이 경우 heroForm으로 저장한 FormGroup을 폼엘리먼트와 연관시킵니다.

이제 클래스에 FormGroup이 있으므로 컴포넌트 클래스의 해당 FormControl과 입력을 연결하기 위해 템플릿 구문을 수정합니다. 상위 FormGroup이 없더라도 [formControl] = "name"은 해당 디렉티브가 단독으로 사용할 수 있기 때문에 실행되었습니다. 즉, FormGroup에 있지 않아도 작동합니다. 상위 FormGroup을 사용하면 name 입력에 class의 올바른 FormControl과 연관시키기 위해 formControlName = “name” 구문이 필요합니다. 이 구문은 Angular에게 부모 FormGroup(이 경우 heroForm)을 찾은 다음 해당 그룹 내에서 name이라는 FormControl을 찾습니다.

form-group CSS 클래스는 무시하십시오. 부트스트랩 CSS 라이브러리에 속하며 Angular는 아닙니다. form-control 클래스와 마찬가지로 폼을 스타일링하지만 결코 로직에 영향을 주지 않습니다.

폼이 멋져보입니다. 그런데 효과가 있습니까? 사용자가 이름을 입력하면 값은 어디로 이동합니까?

 

폼 모델 살펴보기

이 값은 그룹의 FormControl을 뒷받침 하는 폼모델로 전달됩니다. 폼모델을 보려면 hero-detail.component.html의 닫는 form 태그 뒤에 다음 행을 추가하십시오.

src/app/hero-detail.component.html

<p>Form value: {{ heroForm.value | json }}</p> <p>Form status: {{ heroForm.status | json }}</p>

heroForm.value는 폼모델을 리턴합니다. 폼모델값을 JsonPipe를 통해 파이핑하면 모델이 브라우저에서 JSON으로 표시됩니다.

Name의 초기 프로퍼티 값은 빈 문자열입니다. 이름을 입력박스에 입력하고 JSON에 표시되는지 확인합니다.

폼의 기본사항이 마무리 되었습니다.

실생활 앱에서 폼은 빠르게 커집니다. FormBuilder를 사용하면 폼 개발 및 유지관리가 더 쉬워집니다.