04 리액티브 폼(Reactive Forms) 08

더 많은 FormControls

영웅은 이름 이외의 것이 있습니다. 주인공에게는 주소, 수퍼 파워, 때로는 조수가 있습니다.

주소에 주 프로퍼티가 있습니다. 사용자는 <select> 박스로 주를 선택하고 <option> 엘리먼트를 주로 채 웁니다. 따라서 data-model.ts에서 states를 가져옵니다.

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

import { Component }                            from '@angular/core'; import { FormBuilder, FormGroup, Validators }   from '@angular/forms'; import { states } from './data-model';

states 프로퍼티를 선언하고 다음과 같이 heroForm에 몇 개의 주소FormControls를 추가하십시오.

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

export class HeroDetailComponent {       heroForm: FormGroup;       states = states;             constructor(private fb:FormBuilder){           this.createForm();       }         createForm(){         this.heroForm = this.fb.group({             name:['', Validators.required],             street:'',             city:'',             state:'',             zip:'',             power:'',             sidekick:''         });       }   }

그런 다음 hero-detail.component.html의 form 엘리먼트에 해당 마크업을 추가하십시오.

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>     <div class="form-group">         <label class="center-block">Street:             <input class="form-control" formControlName="street">         </label>     </div>     <div class="form-group">         <label class="center-block">City:             <input class="form-control" formControlName="city">         </label>     </div>     <div class="form-group">         <label class="center-block">State:             <select class="form-control" formControlName="city">                 <option *ngFor="let state of states" [value]="state">                     {{state}}                 </option>             </select>         </label>     </div>     <div class="form-group">         <label class="center-block">Zip Code:             <input class="form-control" formControlName="zip">         </label>     </div>     <div class="form-group radio">         <h4>Super power:</h4>         <label class="center-block">             <input type="radio" formControlName="power" value="flight">Flight         </label>         <label class="center-block">             <input type="radio" formControlName="power" value="x-ray vision">X-ray vision         </label>         <label class="center-block">             <input type="radio" formControlName="power" value="strength">Strength         </label>     </div>     <div class="checkbox">         <label class="center-block">             <input type="checkbox" formControlName="sidekick">I have a sidekick.         </label>     </div> </form> <p>Form value: {{ heroForm.value | json }}</p>

 

알림: 마크업에서 form-group, form-control, center-block 및 checkbox에 대한 언급은 무시하십시오. 그것들은 Angular가 무시하는 부트스트랩 CSS 클래스입니다. formGroupName 및 formControlName 프로퍼티에 주의하십시오. HTML 컨트롤을 컴포넌트 클래스의 Angular FormGroup 및 FormControl 프로퍼티에 바인딩하는 Angular 디렉티브입니다.

수정된 템플릿에는 더 많은 텍스트 입력, state 선택를 위한 선택상자, power 라디오 버튼 및 sidekick을 위한 체크박스가 포함됩니다.

option의 값 프로퍼티를 [value]="state"로 바인드해야 합니다. 값을 바인드하지 않으면 select에 데이터 모델의 첫 번째 옵션값이 표시됩니다.

컴포넌트 클래스는 템플릿의 표현과 상관없이 컨트롤 프로퍼티를 정의합니다. state 컨트롤, power 컨트롤 및 sidekick 컨트롤은 name 컨트롤을 정의한 것과 같은 방식으로 정의합니다. formControlName 디렉티브를 사용하여 FormControl 이름을 지정하여 같은 방법으로 이러한 컨트롤을 HTML 템플릿 엘리먼트에 연결합니다.

라디오 버튼, 선택 항목 및 체크박스에 대한 자세한 내용은 API 참조 문서를 참조하십시오.