?做你自己咆疗,有我愛你
每日易學(xué): 簡單聊一聊Angular4 中模板驅(qū)動表單里ngModel的使用勒极。盡量細(xì)而分;
開門見山:
1.簡單form表單:
? form表單
? user基類:
? user.ts
?ts代碼:記得引入user類历帚;
? ts
頁面效果:
頁面效果
控制臺輸出:
? 控制臺輸出
2.三箭頭的ngModel股淡;??? ngModel --? [ngModel] --? [(ngModel)]? ;注意ngModel是和name屬性綁定的沥潭,沒有設(shè)置name是會有異常的政敢;
ngModel:
?? ngModel
?其他的不改變其徙,我們看看頁面效果
?ngModel效果
[ngModel]:
?? [ngModel]
? 其他不變,看看效果:
[ngModel]效果
輸入值看看:
? 做你自己喷户,有我愛你
?做你自己唾那,有我愛你
控制臺不會發(fā)生改變;
[(ngModel)]:
user的name屬性里傳入一個(gè)值:
做你自己褪尝,有我愛你
[(ngModel)]
初始效果:
?? 效果圖
編輯值:
? 編輯值
看控制臺效果:
控制臺
看到后來name屬性改變了闹获;
由此可以知道:
ngModel :用于綁定值? [ngModel]用于單向綁定值,并不影響原始值河哑;[(ngModel)]用于雙向綁定避诽,能改變原始值;