Mean스텍(10) - post.component.html 바인딩 -

 - post.component.html 바인딩 -

 

Angular를 사용하는 가장 큰 목적 중의 하나가 '바인딩'이다. '바인딩'은 '기차 승강장'과 같다. 바인딩으로 .component.ts 파일 내의 계산값과 .component.html 프론트 값을 연결할 수 있다. 바인딩을 사용하면, Node.js + Express + MongoDB 만으로는 길게 작성해야 할 프론트 코딩을 간략하게 줄일 수 있다.

 

만일 Angular를 사용하지 않고, Express 템플릿 ejs나 pug(구 jade)를 사용한다면, ejs에서 <%%>로 도배된 코드를 길게 사용해야 한다. 이는 html코드들과 뒤섞여 php를 사용하는 것과 같은 상황이 벌어진다.

 

이번 포스팅에서는 Form 태그 내에서의 바인딩만 연습해보자. 

1 『 post.component.html 』

 //Code

-> 빨간줄만 유의해서 보자. 

---

<div class="body-blur"> 

        <div class="row columns">
               <h1>Post a tutorial</h1>
        </div>

  <form [formGroup]="postForm" (ngSubmit)="addPost(postForm.value)">
       <div class="row">

             <div class="columns small-12 medium-6">
                  <label>Title of Tutorial
                        <input type="text" name="title" [formControl]="postForm.controls['title']">
                  </label>
             </div>

 

              <div class="columns small-12 medium-6"> 

                 <label>URL
                      <input type="text" name="url" [formControl]="postForm.controls['url']">
                 </label>
              </div>

            </div>

 

               <div class="row columns">
                   <label>Description
                       <textarea name="description" id="description" [formControl]="postForm.controls['description']">

                      </textarea>
                  </label>

                      <input type="submit" class="cta-btn filled" value="Post Tutorial" [disabled]="!postForm.valid">

             </div>
  </form>
 </div>

---

[formGroup] = "postForm" 은 프로퍼티 바인딩을 사용했다. View에서 [ ] 안에 property를 지정하고, 컴포넌트에서 class로 선언한 property를 연결하면, form태그에는 자연스럽게 component class에서 지정한 프로퍼티 값을 가질 수 있다. 현재 post.component.ts의 postForm 프로퍼티 안에는 FormGroup이란 내장모듈을 연결해준 상태다.

 

(ngSubmit)은 이벤트 바인딩으로 프로퍼티 바인딩과 전반대 개념이다. View에 있는 데이터를 컴포넌트로 전달할 때 이벤트를 걸어준다. 여기서 'addPost( )' 함수는 post.component.ts에서 클래스 매서드로 이미 지정을 해 뒀다.

 

[formControl] = "postForm.controls['title']"은  formControl 프로퍼티를 만든 이후 컴포넌트의 postForm 프로퍼티가 상속받은 FormBuilder의 controls 매서드를 사용해서 유효성 검사를 한다.

  

post.component.ts 파일에서 유효성 검사를 하는 부분은 아래와 같다.

---

constructor(private _postService:PostService, fb:FormBuilder, private router:Router) {

 

         this.postForm = fb.group({

                'title':[null,Validators.compose([Validators.required,Validators.minLength(10),Validators.maxLength(75)])],
                'url' : [null,Validators.required],
                'description':[null,Validators.compose([Validators.required,Validators.minLength(30),Validators.maxLength(500)])],

           });

    }

---

// 결과 

 

2 『 post.scss 스타일 』

현재 폼 작성 스타일을 좀더 모던하게 고쳐보자.

 

---

$bg : #2A3136;

$text-color : #88949D;
$accent-color : #00E4AC;

label {
 color:$accent-color;
 font-size:1.5em;
}

input[type='text'],textarea {
 background:none;
 border:1px solid #617879;
 padding:22px 15px;
 color:$text-color;
}

textarea {
 min-height:70px;
}

.filled {
 background:$accent-color;
 color:$bg;
 float:left;
 border-radius:0;
 font-size:1.5em;
 text-transform: uppercase;
 font-weight:700;
 font-family: 'KoPub Dotum';
 padding:12px 22px;
 margin-top:40px;

}

 

.alert {
 margin:-5px 0 20px 0;
}

---

//결과