做你自己，有我爱你

每日易学： 简单聊一聊Angular4 中模板驱动表单里ngModel的使用。尽量细而分；

开门见山：

1.简单form表单：

  form表单

  user基类：

  user.ts

 ts代码：记得引入user类；

  ts

页面效果：

页面效果

控制台输出：

  控制台输出

2.三箭头的ngModel；    ngModel --  [ngModel] --  [(ngModel)]  ;注意ngModel是和name属性绑定的，没有设置name是会有异常的；

ngModel:

   ngModel

 其他的不改变，我们看看页面效果

 ngModel效果

[ngModel]:

   [ngModel]

  其他不变，看看效果：

[ngModel]效果

输入值看看：

  做你自己，有我爱你

 做你自己，有我爱你

控制台不会发生改变；

[(ngModel)]:

user的name属性里传入一个值：

做你自己，有我爱你

[(ngModel)]

初始效果：

   效果图

编辑值：

  编辑值

看控制台效果：

控制台

看到后来name属性改变了；

由此可以知道：

ngModel :用于绑定值  [ngModel]用于单向绑定值，并不影响原始值；[(ngModel)]用于双向绑定，能改变原始值；