문제상황
앵귤러2에 텍스트 에디터 플러그인을 붙여 써야하는 상황이 발생.
처음 고른 에디터는 nhn에서 만든 Toast ui editor(일명 tui editor) 이었지만 이의 앵귤러 버전인 ngx-tui-editor 가 빌드시에 가용 메모리를 모두 점유하는? 문제가 발생하여 좀 더 안정성 있는 에디터인 Froala editor를 사용하기로 결정.
https://www.froala.com/wysiwyg-editor/docs/framework-plugins/angularjs-2-4
하지만 Docs 를 읽는 도중에 Reactive Form 이라는 용어가 등장하여 앵귤러2 Form 에 대해 간단히 찾아보고 내용을 정리하고자 함
(기본 사용법으로 해도 되지만 이미 궁금증이 생긴 상황)
1. Reactive Form VS Template From
앵귤러 2에서 폼의 작동원리는 2가지 방법으로 나뉨.
하나는 템플릿 기반의 폼으로, 각 input 태그에는 ngModel 속성을 주고, form 태그에서 #참조변수명="ngForm" 으로 (폼값에)로컬레퍼런스를 걸어 ngSubmit에 인자로 넘기는 방식인데, 나중에 따로 포스팅하기로 하고 Reactive Form만 살펴봄기로 함.
즉, Template Form 은 폼 설정이 html 템플릿에 있다고 할 수 있음
2. 모듈추가
Reactive Form을 사용하기 위해서는 app.module.ts 파일에 "ReactiveFormsModule" 을 가져와야 한다.
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { PostWriteComponent } from './components/post-write/post-write.component'; import { FormsModule, ReactiveFormsModule} from '@angular/forms'; import { HttpModule, RequestOptions } from '@angular/http'; @NgModule({ declarations: [ ], imports: [ BrowserModule, HttpModule, FormsModule, ReactiveFormsModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } | cs |
필요 없는 부분은 뺏음.
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
부분을 추가하고 하단에 imports 시킨다.
3. 컴포넌트 파일에 Form 구조 작성
Reactive Form 에서는 html이 아닌 컴포넌트에서 직접 FormGroup 과 FormControl 을 설정해주어야 함.
post-write.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-post-write', templateUrl: './post-write.component.html', styleUrls: ['./post-write.component.css'] }) export class PostWriteComponent implements OnInit { postForm: FormGroup; constructor() { this.postForm = new FormGroup({ 'category': new FormControl(), 'isNotice': new FormControl(), 'title': new FormControl(), 'content': new FormControl() }); } ngOnInit() {} onSubmit(){ console.log(this.postForm); } } | cs |
위와 같이 FormGroup 타입으로 폼값이 들어갈 객체를 생성해주는 동시에 FormControl로 프로퍼티를 지정해줌.
*onSubmit 함수는 아래에서 사용
4. html 폼 작성
html로 폼 테그를 짤 때에는 form 태그의 [formGroup]="컴포넌트에서생성한폼그룹객체" 와 input 태그의 formControlName 지시자만 잘 설정해주면 됨.
템플릿 기반 폼과는 달리 form 의 ngSubmit 이벤트 발생시 폼값을 html 에서 인자로 넘겨주는 것이 아니라, 이미 formGroup 과 formControlName 으로 바인딩되어있는 개체를 사용하기만 하면 된다.
post-write.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <h1>글 작성</h1> <form [formGroup]="postForm" (ngSubmit)="onSubmit()"> <div> <label for="category">카테고리</label> <input type="text" name="category" formControlName="category"> </div> <div> <label for="isNotice">공지사항으로 설정</label> <input type="checkbox" name="isNotice" formControlName="isNotice"> </div> <div> <label for="title">제목</label> <input type="text" name="title" formControlName="title"> </div> <div> <textarea [froalaEditor] formControlName="content"></textarea> </div> <button type="submit">Submit</button> </form> | cs |
[formGroup]="postForm"
부분과
formControlName="category"
같은 부분이 핵심이다.
5. 빌드 후 데이터 확인
이제 ng build 후 브라우저 개발자도구 창에서 데이터를 확인한다.
이렇게 적당히 값을 입력한 후
서브밋을 하면 콘솔로 폼 값이 찍혀 나온다.
value 키에 실제 값들이 들어있는 것을 확인가능!
'Javascript > Angular2' 카테고리의 다른 글
| [Angular2] Angular Life Cycle Hooks (0) | 2018.05.29 |
|---|---|
| [Angular2] Service를 이용한 컴포넌트 간의 통신 (2) | 2018.05.26 |
| [Angular2] nginx 포트포워딩에 의한 앵귤러 서비스 url 경로문제 (0) | 2018.04.13 |
망원동똑똑이
프로그래밍 지식을 자유롭게 모아두는 곳입니다.