Angular4的表单1

我觉得ng的表单比一般的表单难多了,下面整理学习表单我认为值得注意的点（会有点零碎）

模板变量

image.png

除非你绑定一个事件，否则这将完全无法工作。只有在应用做了些异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）。本例代码将keyup事件绑定到了数字0，这是可能是最短的 模板语句。 虽然这个语句不做>什么，但它满足 Angular 的要求，所以 Angular 将更新屏幕。

image.png

click me
{{clickMessage }}

传入$event，这种做法是靠不住的

{{values}}

使用模板变量

{{value2}}

按键事件过滤

{{value1}}

失去焦点事件

{{value}}

下面自己写个实例


点击


  
{{item}}

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);
    }
  }
}