我觉得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);
    }
  }
}