8. Angular Reactive Forms

원문

Angular入門 未経験から1ヶ月でサービス作れるようにする その7. Angularのフォーム2 (Reactive forms) -

---

[(ngModel)]을 FormGroup, FormControl로 교체하기

1. 새로운 모듈 추가 (ReactiveFormsModule 추가)

app.module.ts

[formGroup]은 ReactiveFormModule에 소속되어있으므로 (Angular 공식 홈페이지 참고https//angular.io) 모듈에 추가한다.

 

2. component.ts 코드 작성

 

 

FormBuilder추가

product변수를 지우고 productForm변수를 추가한다.

 

productForm형은 FormGroup이다.

this.fb.group()에서 FormGroup을 넣음.

이 메서드의 인수는 Form의 요소로 이용하는 값의 키와 그 초기값임. 

배열로 되어있는 것은 2번째 이행에 Validator를 넣을수 있도록 하기 위함임. 나중에 설명하겠다.

덧붙여 각 name:['']이 FormControl이다.

FormBuilder를 사용하면 어떤 요소가 어떤 클래스인지 알기어렵기때문에 FormBuilder를 사용하지않고 똑같이 처리할수 있는 아래의 코드를 적어둔다.

productService로부터 product를 꺼낸후 productform에 현재 product의 값을 넣음

3. component.html 코드 작성

HTML에 FormGroup, FormControl 사용

• FormControl: <input>등의 입력 요소하나에 대응하는 클래스
• FormGroup: <form>요소에 대응하는 클래스
• FormBuilder: FormGroup, FormControl을 작성하는 클래스

form요소에 대해서는 [formGroup]을 지정함으로써 form에 productForm을 연결함.

각<input>요소에서 [(ngModel)]을 지우고 formControlName을 추가하여 각 productForm의 요소와 연결함.

아이디만 편집하는 것이 아니기때문에 productForm.control.id.value에서 꺼내어 그대로 표시하도록 함.

---

Form의 송신에 의한 저장 처리

이 앱은 모든 상태가 메모리상에서 처리되어있다. [(ngModel)]양방향 바인딩이었기 때문에 그대로 아무것도 하지않으면 저장되어있었다.

이번에는 ngModel을 사용하지 않기 때문에 편집해도 ProductService가 가진 products를 변경하는 처리가 없기때문에 변경이 저장되지않는다.

ProductService에 update()메서드를 추가해서 변경된 데이터를 저장하도록 수정해보겠다.

product.service.ts에 update()추가

update에서 얻은 product와 같은 id를 가진 index를 찾고 products의 index번호의 요소를 입력받은 product로 교체하는 것이다.

findIndex() 메서드
Javascript의 Array메서드다. 배열의 각 요소에 대해 인수의 메서드를 실행하여 true가 돌아오는 최초의 배열의 인덱스를 반환한다.

---

ProductEditComponent 에서 saveProduct() 메서드 변경

const { id, name, price, description } = this.productForm.getRawValue();

this.productForm.getRawValue()은 FormGroup의 FormControl의 값을 key:value의 형식으로 객체로 변환한것을 리턴한다.

이번에 예를들어 id가 3인 product에 대해 아무것도 편집하지않고 실행하면 아래(raw value 느낌?)를 반환한다.

{id: 3, name: "異世界転生から始めるAngular生活(1)", price: 680, description: "スパゲッティの沼でデスマーチ真っ最中の田中。過酷な日々からの現実逃避か彼は、異世界に放り出され、そこでAngularの入門書を拾う。現実逃避でさえ、プログラミングをするしかない彼に待ち受けるのは！？"}

const { xxx } = yyy 는 yyy 객체의 xxx요소를 xxx라는 변수에 넣는다는 처리다. 

즉, id, name, price, description이라는 변수에 FormGroup의 각 값을 넣는다는 뜻이다.

다음행은 ProductService에 새롭게 만든 update()메서드를 호출하고있다.

마지막행은 특별히 변경할 필요는 없지만 저장후에 일람리스트화면으로 전환하게되어있었기때문에 상세화면으로 전환하도록 수정했다.