我试图读取HTML元素的属性值，如angular 2中的输入标记 . 我首选的方法是将input元素与component属性绑定，而不创建另一个模型类

我所知道的两个解决方案是：

1） Using JSON object ：为表单创建一个引用变量：

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">

我的登录组件将成为

onSubmit(form:NgForm){
    console.log(form.value);
}

2) 创建模型对象并在组件中初始化它

user=new User();
onSubmit(form:NgForm){
   console.log(user.username); 
}

并在HTML中

<input type="text" id="username" name="username" 
            [(ngModel)]="user.username" #username="ngModel"/>

但我不想使用上面提到的任何方法（不想使用JSON对象NOR想为每个提交的表单创建模型对象..我应该吗？）

我想直接绑定组件属性 . 所以这样的事情

我想直接将用户在输入元素用户名中输入的内容读入LoginComponent用户名的属性（关注[（ngModel）] = "username"而不是[（ngModel）] = "user.username"

<form (ngSubmit)="onSubmit()" #loginForm="ngForm">
                <input type="text" id="username" name="username"     [(ngModel)]="username" #username="ngModel"/>
                {{username}}           
    		<button type="submit">Login</button>
 </form>

@Component({'
.. something
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
   username:string;
  onSubmit(){
    console.log(username);
    console.log(user?.username);
  }  
}

EDIT 我试过用"this"

onSubmit(){
    console.log(this.username);
  }

但后来我得到的错误是zone.js：632错误：未捕获（在承诺中）：错误：无法分配给引用或变量！

Error: Cannot assign to a reference or variable!
 Thanks in advance for the help
angular2-template angular2-forms