04 리액티브 폼(Reactive Forms) 11

setValue 및 patchValue를 사용하여 폼 모델 채우기

이전에 컨트롤을 만들고 동시에 값을 초기화했습니다. 나중에 setValue 및 patchValue 메소드를 사용하여 값을 초기화하거나 재설정할 수도 있습니다.

 

setValue

setValue를 사용하면 FormGroup 뒤에 있는 폼모델과 정확히 일치하는 프로퍼티를 가진 데이터 객체를 전달하여 모든 폼컨트롤 값을 한번에 할당할 수 있습니다.

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

this.heroForm.setValue({       name: this.hero.name,       address: this.hero.addresses[0] || new Address()     });

setValue 메서드는 폼 컨트롤 값을 할당하기 전에 데이터 개체를 철저히 검사합니다.

FormGroup 구조와 일치하지 않거나 그룹의 모든 컨트롤 값이 누락된 데이터 개체를 허용하지 않습니다. 이런식으로 오타가 있거나 컨트롤을 잘못 중첩한 경우 유용한 오류 메시지가 리턴할 수 있습니다. 반면에 patchValue는 조용히 실패합니다.

한편, setValue는 에러를 캐치해 명확하게 리포트합니다.

당신은 전체 hero를 거의모두 setValue의 인수로 사용할 수 있습니다. 이유는 모양이 컴포넌트의 FormGroup 구조와 비슷하기 때문입니다.

영웅의 첫 번째 주소만 표시할 수 있으며 주인공에 주소가 전혀 없을 가능성도 고려해야 합니다. 다음은 데이터 객체 인수에 address 프로퍼티의 조건부 설정을 설명합니다.

src/app/hero-detail-7.component.ts

address: this.hero.addresses[0] || new Address()

 

patchValue

patchValue를 사용하면 원하는 컨트롤에만 키/값 쌍의 객체를 제공하여 FormGroup의 특정 컨트롤에 값을 할당할 수 있습니다.

다음 예제는 폼의 name 컨트롤만 설정합니다.

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

this.heroForm.patchValue({       name: this.hero.name     });

patchValue를 사용하면 다양하게 분산된 데이터 및 폼모델에 보다 유연하게 대처할 수 있습니다. 그러나 setValue와 달리 patchValue는 누락된 컨트롤 값을 확인할 수 없으며 유용한 오류를 던지지도 않습니다.

 

폼모델값 설정시기 (ngOnChanges)

이제 폼모델값을 설정하는 방법을 알았습니다. 그러면 언제 그들을 설정합니까? 이에 대한 대답은 컴포넌트가 데이터 모델 값을 가져오는 시점에 따라 달라집니다.

이 리액티브 폼의 HeroDetailComponent는 마스터/디테일 HeroListComponent 내에 중첩됩니다. HeroListComponent는 영웅 이름들을 사용자에게 표시합니다. 사용자가 영웅을 클릭하면 목록 컴포넌트는 hero 입력 프로퍼티에 바인딩하여 선택한 영웅을 HeroDetailComponent로 전달합니다.

hero-list.component.html (simplified)

<nav>     <a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a> </nav>   <div *ngIf="selectedHero">     <hero-detail [hero]="selectedHero"></hero-detail> </div>

이런 방식으로 사용자가 새로운 영웅을 선택할 때마다 HeroDetailComponent의 hero의 값이 변경됩니다. ngOnChanges 훅에서 setValue를 호출해야 하는데, Angular는 다음과 같이 입력 hero 프로퍼티가 변경 될 때마다ngOnChanges를 호출합니다.

먼저 hero-detail.component.ts에서 OnChanges 및 Input 심볼을 임포트합니다.

src/app/hero-detail.component.ts (core imports)

import { Component, Input, OnChanges }        from '@angular/core';

영웅 입력 프로퍼티를 추가하십시오.

src/app/hero-detail-6.component.ts

@Input() hero:Hero;

다음과 같이 클래스에 ngOnChanges 메서드를 추가합니다.

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

ngOnChanges(){     this.heroForm.setValue({       name: this.hero.name,       address: this.hero.addresses[0] || new Address()     });   }

 

폼 플래그 재설정

영웅이 변경되면 이전 영웅의 제어값이 지워지고 상태플래그가 원래 상태로 복원되도록 폼을 재설정해야 합니다. ngOnChanges의 맨 위에서 이처럼 재설정을 호출할 수 있습니다.

src/app/hero-detail-7.component.ts

this.heroForm.reset();

reset 메소드에는 선택적 state 값이 있으므로 플래그와 제어값을 동시에 재설정할 수 있습니다. 내부적으로, reset는 인수를 setValue에 전달합니다. 리팩토링과 ngOnChanges가 이렇게됩니다.

src/app/hero-detail.component.ts (ngOnchanges - revised)

this.heroForm.reset({       name: this.hero.name,       address: this.hero.addresses[0] || new Address()     });

 

HeroListComponent 및 HeroService 만들기

HeroDetailComponent는 마스터/디테일 뷰에서 HeroListComponent의 중첩된 하위 컴포넌트입니다. 최종 화면은 다음과 같이 보입니다.

 

HeroListComponent는 주입 된 HeroService를 사용하여 서버에서 영웅을 검색 한 다음 그 영웅을 일련의 버튼으로 사용자에게 제공합니다. HeroService는 HTTP 서비스를 에뮬레이트합니다. 이 서비스는 약간의 지연후에 해결되는 영웅의 Observble을 리턴합니다. 약간의 지연동안에는 네트워크 대기시간을 시뮬레이트하고 응용프로그램의 필수적으로 비동기적인 특성을 시각적으로 표시합니다.

사용자가 영웅을 클릭할 때 컴포넌트는 HeroDetailComponent의 hero 입력 프로퍼티에 바인딩된 selectedHero 프로퍼티를 셋팅합니다. HeroDetailComponent는 변경된 영웅을 탐지하고 해당 영웅의 데이터 값으로 해당 폼을 다시 설정합니다.

"Refresh"버튼은 영웅을 다시 가져오기 전에 영웅 목록과 현재 선택된 영웅을 지웁니다.

나머지 HeroListComponent 및 HeroService 구현 세부 내역은 리액티브 폼을 이해하는 것과는 관련이 없습니다. 관련기술은 영웅 투어를 포함하여 문서의 다른 부분에서 다룹니다.

당신이 리액티브 폼 자습서의 단계와 함께 코딩하는 경우 아래에 표시된 소스 코드를 기반으로 적절한 파일을 만드세요. hero-list.component.ts가 Observable과 finally를 임포트합니다. 반면에 hero.service.ts는 rxjs에서 Observable, of 및 delay를 임포트합니다. 그런 다음 여기로 돌아와 폼배열 프로퍼티를 배웁니다.