每日易学: 简单聊一聊Angular4 中模板驱动表单里ngModel的使用。尽量细而分;
开门见山:
1.简单form表单:
user基类:
ts代码:记得引入user类;
页面效果:
控制台输出:
2.三箭头的ngModel; ngModel -- [ngModel] -- [(ngModel)] ;注意ngModel是和name属性绑定的,没有设置name是会有异常的;
ngModel:
其他的不改变,我们看看页面效果
[ngModel]:
其他不变,看看效果:
输入值看看:
控制台不会发生改变;
[(ngModel)]:
user的name属性里传入一个值:
初始效果:
编辑值:
看控制台效果:
看到后来name属性改变了;
由此可以知道:
ngModel :用于绑定值 [ngModel]用于单向绑定值,并不影响原始值;[(ngModel)]用于双向绑定,能改变原始值;