https://app.pluralsight.com/library/courses/angular-forms/table-of-contents
위 강좌를 보며 실습.
이번엔 HTTP Form Posting.
데이터 서비스 만들기
![](https://archmond.net/wp-content/uploads/2020/04/image-15.png)
ng generate service data
![](https://archmond.net/wp-content/uploads/2020/04/image-17.png)
data.service가 추가됨
![](https://archmond.net/wp-content/uploads/2020/04/image-28.png)
postUserSettingsForm을 Observable을 활용해 추가(rxjs가 임포트됨)
![](https://archmond.net/wp-content/uploads/2020/04/image-29.png)
user-settings-form의 constructor에 DataService를 액세스할 수 있도록 함
onSubmit에 Observable의 subscribe를 이용해 콘솔에 result, error 출력
![](https://archmond.net/wp-content/uploads/2020/04/image-30.png)
Name을 입력한 후 Send를 클릭
![](https://archmond.net/wp-content/uploads/2020/04/image-24.png)
success: 결과가 나타남
HttpClient로 HTTP액세스
![](https://archmond.net/wp-content/uploads/2020/04/image-31.png)
app.module.ts의 imports에 HttpClientModule을 추가.(@angular/common/http)
![](https://archmond.net/wp-content/uploads/2020/04/image-23.png)
data.service에 돌아와서, postUserSettingsForm 메서드의 출력을 변경.
![](https://archmond.net/wp-content/uploads/2020/04/image-32.png)
post의 파라미터가 순서대로 url, boday, options임을 확인
![](https://archmond.net/wp-content/uploads/2020/04/image-33.png)
Observable의 리턴 타입을 any로 변경.(어떤 post이든 리턴)
폼 데이터 Posting하기(실제 HTTP 끝점으로)
![](https://archmond.net/wp-content/uploads/2020/04/image-34.png)
putsReq에 접속해, URL을 복사
![](https://archmond.net/wp-content/uploads/2020/04/image-35.png)
data.serveice의 ‘url’에 입력
![](https://archmond.net/wp-content/uploads/2020/04/image-17.png)
github의 putsReq 매뉴얼을 참고하여, JSON 데이터를 response.body에 설정.(update)
상단의 Requests는 현재 0.
![](https://archmond.net/wp-content/uploads/2020/04/image-16.png)
이름을 임의로 입력하고, Send를 누르면 잠시 뒤 success가 나타남.
![](https://archmond.net/wp-content/uploads/2020/04/image-19.png)
putsReq에 Requests가 1로 증가.
![](https://archmond.net/wp-content/uploads/2020/04/image-19.png)
Response도 확인 가능.
![](https://archmond.net/wp-content/uploads/2020/04/image-22.png)
parsedBody의 id를 1234로 지정(update)
![](https://archmond.net/wp-content/uploads/2020/04/image-36.png)
Send 버튼을 눌렀을 때 id가 1234로 설정 것을 확인 가능.
HTTP 에러 핸들링
![](https://archmond.net/wp-content/uploads/2020/04/image-20.png)
github의 putsReq 매뉴얼을 참고하여, response.status 400을 설정.
![](https://archmond.net/wp-content/uploads/2020/04/image-25.png)
400 에러 발생
![](https://archmond.net/wp-content/uploads/2020/04/image-26.png)
자세히 보면 status, url 등을 확인 가능
![](https://archmond.net/wp-content/uploads/2020/04/image-37.png)
userSettingsForm의 errorResponse를 any로 변경
(상단 postErrorMessage가 ”, postError가 false로 초기화되어 있음)
![](https://archmond.net/wp-content/uploads/2020/04/image-21.png)
putsReq의 body에 errorMessage를 설정
![](https://archmond.net/wp-content/uploads/2020/04/image-27.png)
user-settings-form의 html을 수정.
postError가 false일 때 postErrorMessage 출력
![](https://archmond.net/wp-content/uploads/2020/04/image-38.png)
name을 입력 후 Send를 누르면 400에러 발생, Some error goes here…가 보인다.
![](https://archmond.net/wp-content/uploads/2020/04/image-39.png)
JSON의 errorMessage를 처리한 것. 멋있다.
이번에는 폼 처리 상 문제가 있을 때만(inValid) 출력하게 해보자
![](https://archmond.net/wp-content/uploads/2020/04/image-40.png)
onSubmit에서 form.valid가 아닌 경우 Please fix… 메시지가 나타나도록 설정
![](https://archmond.net/wp-content/uploads/2020/04/image-41.png)
이미 html 속에 required가 있기 때문에 제대로 동작할 것으로 기대.
![](https://archmond.net/wp-content/uploads/2020/04/image-42.png)
이름 입력 없음 오류, Please fix… 메시지까지 잘 출력됨.
![](https://archmond.net/wp-content/uploads/2020/04/image-43.png)
이름을 입력하면 response가 돌아옴
Select 엘리먼트의 데이터 받기
좀 쌩뚱맞지만, 다른 데이터 입력과 달리 Select는 다루기가 귀찮기 때문에 제대로 들어놓자.
![](https://archmond.net/wp-content/uploads/2020/04/image-44.png)
기존 코드에서 hard code되어 있던 option을 제거하고, ngFor로 변경.
![](https://archmond.net/wp-content/uploads/2020/04/image-45.png)
subscriptionTypes를 설정
![](https://archmond.net/wp-content/uploads/2020/04/image-46.png)
type을 표시하면,
![](https://archmond.net/wp-content/uploads/2020/04/image-18.png)
Subscription Type에 해당 항목들이 나타난다.
![](https://archmond.net/wp-content/uploads/2020/04/image-47.png)
subscriptionTypes를 string배열의 Observable로 수정하고,
ngOnInit에서 getSubscriptionTypes 메서드로 값을 받아오게 한다.
![](https://archmond.net/wp-content/uploads/2020/04/image-48.png)
메서드 선언
![](https://archmond.net/wp-content/uploads/2020/04/image-49.png)
data.service에 자동으로 생성된 생성자는 삭제하고, getSubscriptionTypes를 of를 사용해 지정.
![](https://archmond.net/wp-content/uploads/2020/04/image-50.png)
아직 데이터도 나타나지 않고 오류가 나지만,
![](https://archmond.net/wp-content/uploads/2020/04/image-52.png)
파이프로 async를 지정하면
![](https://archmond.net/wp-content/uploads/2020/04/image-51.png)
문제 없이 Observable로 만든 데이터를 가져옴.
정리
- 데이터 서비스 작성: @Injectable(), providedIn: root으로 싱글톤 앱 구현 가능
- 폼을 Post하기 위해1: Observables를 사용, 비동기 프로그래밍을 가능케 함. subscribe로 async 호출.
- HTTP에 액세스: HttpClientModule을 사용, HttpClient를 data.service에 Inject
- 폼을 Post 하기 위해2: HttpClient를 사용, http.post(url, data)로 호출
- POST 에러 핸들링: 400, 500 에러 핸들링
- SELECT 데이터 얻기: async 파이프를 사용해 템플릿에서 데이터 가져오기 *ngFor=”let item of items” | asnc”