我觉得ng的表单比一般的表单难多了,下面整理学习表单我认为值得注意的点（会有点零碎）
模板变量
image.png
除非你绑定一个事件，否则这将完全无法工作。只有在应用做了些异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）。本例代码将keyup事件绑定到了数字0，这是可能是最短的 模板语句。 虽然这个语句不做>什么，但它满足 Angular 的要求，所以 Angular 将更新屏幕。
image.png
<button (click) ="onClickMe()">click me</button>
{{clickMessage }}
传入$event，这种做法是靠不住的
<input (keyup) ="onKey($event)">
<p>{{values}}</p>
使用模板变量
<input #box2 (keyup)="0">
<p>{{value2}}</p>
按键事件过滤
<input #box (keyup.enter)="onEnter(box.value)">
<p>{{value1}}</p>
失去焦点事件
<input #box1 (keyup.enter)="update(box1.value)" (blur)="update(box1.value)">
<p>{{value}}</p>
下面自己写个实例
<input #demo (keyup.enter)="addList(demo.value)" demo.value=''>
<button (click)="addList(demo.value)">点击</button>
<ul>
<li *ngFor="let item of lists">{{item}}</li>
</ul>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {
private clickMessage :string;
private values: '';
private value:string;
private value1:string;
constructor() { }
ngOnInit() {
}
onClickMe(){
this.clickMessage ="ddddd";
}
onKey(event:any){
this.values += event.target.value + '|';
}
onEnter(value1:string){
this.value1=value1;
}
update(value:string){this.value=value}
lists = ["nanlan","xiaoju","yunju","missNanlan"];
addList(item:string){
if(item){
this.lists.push(item);
}
}
}
