SeekU

FormsModule 에 들어있는 기본 제공 디렉티브

AppModule 에 등록필요

바인딩전 반드시 name 특성필요

<input name="txtName" ngModel />

단방향 바인딩

<input name="txtName" [ngModel] = "txtName" />

양방향 바인딩 [()] 표현식 사용

[(ngModel)] = '속성'

<input name="txtName" [ngModel] = "txtName" 

(ngModelChange) = "txtName= $event" />

<input name="txtName" [(ngModel)] = "txtName" />

---------------------------------------------------------

import {FormsModule} from '@angular/forms';

@NgModule({

imports : [FormsModule]

})

property 바인딩 : []

요소 : [src]

컴포넌트 속성: [m_field]

디렉티브 속성 : [ngClass], [ngStyle]

컴포넌트 => DOM

속성의 값을 DOM 의 영역에 출력

컴포넌트의 값을 DOM 에 출력

<img [src] = 'maxim.imageUrl'>

<img [src] = {{maxim?.imageUrl}}>

<img [style.width.px] = 'imageSize' />

<img src = {{maxim.imageUrl}}>

#이름지정

특정 폼 컨트롤에  #별칭 형태로 ID 속성을 지정가능

<input #txtName />

txtName.value 로 값 접근 가능

ex) <select #select (change)="selection(select.value)">

<option>RED</option>

<option>GREEN</option>

</select>

selection(select.value) => selection($event.target.value)

import { Http, Headers } from '@angular/http';

@Component({

selector : "idea-manager",

template : requier('/IdeaManagerComponent.html')

})

export class IdeaManagerComponent {

public ideas : any[] = [];

API_URI = "/api/IdeaService";

constructor(private http:Http){

//출력

this.http.get(this.API_URI).subscribe(r=>{

this.ideas = r.json();

});

}

//입력

btnSave(formValue){

var headers = new Headers();

headers.append("Content-Type", "application/json");

this.http.post(

this.API_URI, JOSN.stringify(formValue), {headers:headers})

.subscribe(r => {

this.ideas.push(r.json());

});

}

}

-------------------------------------------------

<form role="form" #form="ngForm">

<div>

<label for="note">아이디어</label>

<div>

<input type="text" id="note" name="note"

[(ngModel)] = "note" />

</div>

</div>

<div>

<div>

<button (click)="btnSave(form.value)">저장</button>

</div>

</div>

</form>