
做你自己,有我爱你
每日易学: 简单聊一聊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)]用于双向绑定,能改变原始值;