[Angular] NgForm이란? (feat. ngModel,ngSubmit,required)

 

ngForm이란?

 

원하는 양식을 만들어 데이터를 전달할 수 있게 도와주는 지시어 중 하나이다.

 

사용하는 방법을 아래와 같이 html 파일에 작성한다.

 

여기서 ngSubmit은 양식에 정보를 기입하고 해당 정보(데이터)를 제출할 때 사용된다.

 

<form #원하는폼이름 = "ngForm" (ngSubmit) = "함수(원하는폼이름)">

 

해당 폼 안에 원하는 정보를 기입할 elements들을 넣고 데이터가 필요한 elements엔 ngModel 지시어를 사용한다.

 

ngModel은 FormControl의 일종으로 데이터를 바인딩할 때 사용하는 지시어다.

---

app.module.ts

 

ngForm은 FormsModule에 포함되어 있는 지시어이므로 FormsModule을 추가해줘야 한다.

 

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})

---

app.component.html

 

아래와 같이 유저의 이름,나이,이메일,자기소개를 받을 수 있는 폼(양식)을 만들 수 있다.

 

<form #userInfoform = "ngForm" (ngSubmit) = "onSubmit(userInfoform)" >
  <input type = "text" name = "name" placeholder = "이름" ngModel required>
  <br/>
  <input type = "number" name = "age" placeholder = "나이" ngModel>
  <br/>
  <input type = "email" name = "email" placeholder = "이메일" ngModel>
  <br/>
  <textarea name = "message" placeholder = "자기소개" ngModel></textarea>
  <br/>
  <button>확인</button>
</form>

---

app.component.ts

 

양식을 제출했을 때의 작업을 처리할 onSubmit 메서드를 만들고 인자값으로 NgForm을 받아준다.

 

export class AppComponent {
  users: User[] = [];

  onSubmit(form: NgForm) {
    this.addUser(form.value);
    console.log(this.users);
  }

  addUser(user: User) {
    this.users.push(user);
  }
}

---

user.ts

 

폼(양식)에 맞게 유저의 프로퍼티를 정의해준다.

 

export interface User {
  name: string;
  email: string;
  age: number;
  introduction: string;
}

---

Test

 

아래와 같이 유저 정보를 기입한 뒤 확인 버튼을 누르면

 

 

위에서 기입한 정보가 담긴 유저가 추가된 모습을 볼 수 있다.

 

 

객체뿐만 아니라 아래와 같이 폼의 value의 특정 값을 받아올 수도 있다.

 

 onSubmit(form: NgForm) {
    console.log(form.value.name);
  }

 

폼 안의 이름의 값이 출력된다.

 

---

Required

 

위에서 이름을 적는 input에 required라고 적혀있는 것을 볼 수 있다.

 

이것은 반드시 채워져야 한다는 의미로 이것을 통해서 validation(유효성)을 판단할 수 있다.

 

...
<input type = "text" name = "name" placeholder = "이름" ngModel required>
...

 

onSubmit에서 form의 유효성을 출력해보면

 

  onSubmit(form: NgForm) {
    this.addUser(form.value);
    console.log(form.valid)
  }

 

아래와 같이 required된 input을 채우지 않으면

 

 

false가 출력된다.