[Angular] Angular 시작하기(local ver.) - (4)폼으로 입력 받기

https://angular.kr/start/start-forms

Angular 가이드

---

 주문 폼 모델 정의하기

 

1. cart.component.ts 파일 코드 수정

① @angular/forms 패키지로 제공되는 FormBuilder 서비스 불러오기(폼 컨트롤 간단히 생성 가능)

② FormBuilder 서비스를 CartComponent constructor( )에 의존성으로 주입

 

 

2. 사용자의 이름과 주소를 입력받기 위해 FormBuilder group( ) 메서드로 name과 address 필드가 있는 폼 모델을 생성 후 checkoutForm 프로퍼티에 할당

 

 

3. 폼을 처리하는 onSubmit( ) 메서드 정의

onSubmit( ) 메서드는 사용자가 입력한 이름과 주소를 제출하는 동작을 함

또 CartService clearCart( ) 메서드를 사용해 폼을 초기화하고 장바구니를 비움

---

주문 폼 구성하기

 

1. cart.component.html 수정

HTML에 <form> 엘리먼트와 Purchase 버튼을 추가

<form> 엘리먼트의 formGroup 프로퍼티에 checkoutForm을 바인딩

 

 

2.  form  태그에 ngSubmit 이벤트를 onSubmit( ) 메서드와 바인딩

 

 

3. name 필드와 address 필드에 연결되는 <input> 필드를 추가

input에 formControlName 어트리뷰트를 사용해 checkoutForm 폼 컨트롤에 있는 name과 address를 지정

---

~화면 확인~

콘솔을 보면 제출한 이름과 주소가 찍힘