FormsModule With ViewChild

2018. 9. 5. 19:09

HTML에서 Input에 있는 값을 [(ngModel)]이 아닌 ViewChild데코레이터를 사용하는 방법입니다.

<HTML>

<label for="name">Name</label>
  <input 
    type="text" 
    id="name" 
    class="form-control"
    #nameInput>

<TS>

@ViewChild('nameInput') nameInputRef: ElementRef;

getInputName() {

  return this.nameInputRef.nativeElement.value;

}

레퍼런스를 이용하여 해당 엘레먼트의 값을 가져오는 방식입니다.

HTML의 input 태그의 #nameInput이 @ViewChild('nameInput')을 함으로써 바인딩 됩니다.

nameInputRef의 타입은 엥귤러/코어 에 있는 ElementRef를 이용하여 접근합니다.

ElementRef를 이용함으로써 native값에 접근할 수 있습니다.

GolDeeper