04 리액티브 폼(Reactive Forms) 09

중첩 된 FormGroups

이 폼은 점점 커지고 다루기 힘들어지고 있습니다. 관련된 FormControl을 중첩된 FormGroup으로 그룹화할 수 있습니다. street, city, state 및 zip은 좋은 주소 FormGroup을 만드는 프로퍼티입니다. 이 방법으로 그룹 및 컨트롤을 중첩하면 데이터 모델의 계층구조를 미러링하고 유효성검사 및 관련된 컨트롤 집합 상태를 추적하는 데 도움이 됩니다.

FormBuilder를 사용하여이 컴포넌트에 heroForm이라는 FormGroup을 하나 생성하였습니다. 부모 FormGroup이라고 하겠습니다. FormBuilder를 다시 사용하여 주소 컨트롤을 캡슐화하는 자식 FormGroup을 만듭니다. 상위 FormGroup의 새 address 프로퍼티에 결과를 지정하십시오.

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],       address: this.fb.group({         street:'',         city:'',         state:'',         zip:''         }),         power:'',         sidekick:''     });     }   }

당신은 컴포넌트 클래스의 폼 컨트롤 구조를 변경했습니다. 해당 컴포넌트 템플릿을 적절하게 조정해야 합니다.

hero-detail.component.html에서 주소 관련 FormControl을 div에 넣습니다. div에 formGroupName 디렉티브에 추가하고 "address"를 바인드합니다. 이것은 heroForm이라는 부모 FormGroup 내의 주소 하위 FormGroup의 프로퍼티입니다.

이 변경 사항을 시각적으로 명확하게 보이기 위해 맨 위에있는 <h4> 헤더를 텍스트 인 Secret Lair로 이동 합니다. 새 주소 HTML은 다음과 같습니다.

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

<div formGroupName="address" class="well well-lg">         <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>

이러한 변경 사항이 적용되면, 브라우저의 JSON 결과는 중첩된 주소 FormGroup을 사용하여 수정된 폼 모델을 표시합니다.

그룹을 만들었고 템플릿과 폼 모델이 서로 대화하고 있음을 알 수 있습니다.