사용자 도구

사이트 도구


angular:two-way-binding

Two Way Binding

<input [(ngModel)]="name" type='text'>

ngModel를 사용하려면 app.module.ts파일에 FormsModule를 포함시켜야 합니다.

import { FormsModule } from '@angular/forms'
login.component.ts
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-login',
  //templateUrl: './login.component.html',
  template: `<div>
  <input [(ngModel)]="login_id" type="text">
  <input [(ngModel)]="password" type="password" (keyup.enter)="login()">
  <button (click)="login()" id="btnSave">로그인</button>
</div>
  `,
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  login_id: string;
  password: string;
  constructor() { }
 
  ngOnInit(): void {
  }
 
  login(){
    console.log('login_id:', this.login_id, this.password)
  }
 
}
angular/two-way-binding.txt · 마지막으로 수정됨: 2025/04/15 10:05 저자 127.0.0.1