04 리액티브 폼(Reactive Forms) 13

폼데이터 저장

HeroDetailComponent는 사용자 입력을 캡처하지만 아무것도 하지 않습니다. 실제 응용프로그램에서, 당신은 영웅변경사항을 저장할 것입니다. 실제 앱에서는 저장되지 않은 변경 사항을 되돌리고 수정을 재개할 수 있을 것입니다. 이 섹션에서 두 가지 기능을 모두 구현하면 폼은 다음과 같이 표시될 것입니다.

 

저장

이 샘플 응용프로그램에서 사용자가 폼을 제출하면 HeroDetailComponent는 영웅 데이터 모델의 인스턴스를 주입 된 HeroService의 save 메소드에 전달합니다.

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

onSubmit() {     this.hero = this.prepareSaveHero();     this.heroService.updateHero(this.hero).subscribe(/* error handling */);     this.ngOnChanges();   }

이 원래 영웅은 미리 저장된 값을 가졌습니다. 사용자의 변경사항은 여전히 ​​폼모델에 있습니다. 따라서 원래의 영웅 값 (hero.id)과 변경된 폼모델 값의 전체 복사본을 조합하여 prepareSaveHero 핼퍼매소드를 사용하여 새로운 영웅을 만듭니다.

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

prepareSaveHero(): Hero {     const formModel = this.heroForm.value;       // deep copy of form model lairs     const secretLairsDeepCopy: Address[] = formModel.secretLairs.map(       (address: Address) => Object.assign({}, address)     );       // return new `Hero` object containing a combination of original hero value(s)     // and deep copies of changed form model values     const saveHero: Hero = {       id: this.hero.id,       name: formModel.name as string,       // addresses: formModel.secretLairs // <-- bad!       addresses: secretLairsDeepCopy     };     return saveHero;   }

 

주소 딥 카피 formModel.secretLires를 saveHero.addresses (주석 처리 된 행 참조)에 할당했다면 saveHero.addresses 배열의 주소는 formModel.secretLairs의 은신처와 동일한 객체가 됩니다. 사용자가 나중에 은신처의 거리를 변경하면 saveHero의 주소 거리가 변경됩니다. prepareSaveHero 메소드는 폼 모델의 secretLairs 객체의 복사본을 생성합니다.

 

되돌리기(변경 취소)

사용자는 되돌리기 버튼을 눌러 변경사항을 취소하고 폼을 원래 상태로 되돌립니다.

되돌리는 것은 쉽습니다. 원래의 변경되지 않은 영웅 데이터 모델에서 폼모델을 작성한 ngOnChanges 메서드를 다시 실행하기 만하면 됩니다.

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

revert() { this.ngOnChanges(); }

 

버튼

컴포넌트의 템플릿 맨 위에 "저장"및 "되돌리기"버튼을 추가하십시오.

src/app/hero-detail.component.html (Save and Revert buttons)

<form [formGroup]="heroForm" (ngSubmit)="onSubmit()" novalidate>   <div style="margin-bottom: 1em">     <button type="submit"         [disabled]="heroForm.pristine" class="btn btn-success">Save</button> &nbsp;     <button type="reset" (click)="revert()"         [disabled]="heroForm.pristine" class="btn btn-danger">Revert</button>   </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>

사용자가 폼 컨트롤 (heroForm.dirty)의 값을 변경하여 폼이 "dirties"할 때까지 버튼은 비활성화 됩니다.

"submit"타입의 버튼을 클릭하면 컴포넌트의 onSubmit 메소드를 호출하는 ngSubmit 이벤트가 발생합니다. 되돌리기 버튼을 클릭하면 컴포넌트의 revert메소드가 호출됩니다. 이제 사용자는 변경 사항을 저장하거나 되돌릴 수 있습니다.

이것이 데모의 마지막 단계입니다. Plunker / download 예제에서 Reactive Forms (최종본)을 시험해 보십시오.