場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

然后新建一個forms組件

ng g component components/forms

后面是跟的app下的組件的路徑和組件名

?

然后修改app.components.html，將forms組件顯示在項目主頁面上

?

首先打開forms.component.ts,添加一個對象屬性，并給此對象添加屬性

? public peopleInfo:any={username:'',sex:'2',cityList:['北京','上海','深圳'],city:'上海',hobby:[{title:'吃飯',checked:false},{title:'睡覺',checked:false},{title:'敲代碼',checked:true}],mark:''}

然后在html中添加顯示的元素

<h2>人員登記系統</h2><div class="people_list"><ul><li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="form_input" /></li><li>性 別：<input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label>　　　<input type="radio" value="2" name="sex"? id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">女 </label></li><li>城 市：<select name="city" id="city" [(ngModel)]="peopleInfo.city"><option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option></select></li><li>愛 好：????????????????<span *ngFor="let item of peopleInfo.hobby;let key=index;"><input type="checkbox"? [id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label>&nbsp;&nbsp;</span></li><li>???備 注：????????????<textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea></li></ul><button (click)="doSubmit()" class="submit">獲取表單的內容</button><br><br><br><br><pre>{{peopleInfo | json}}</pre></div>

為了能實時查看雙向數據綁定的結果，使用通道中的Json進行數據的實時顯示。

? <pre>{{peopleInfo | json}}</pre>

添加一個按鈕，設置其點擊事件對應方法doSubmit

<button (click)="doSubmit()" class="submit">獲取表單的內容</button>

然后在ts中添加doSubmit方法，然后通過dom獲取內容

? doSubmit(){let usernameDom:any=document.getElementById('username');console.log(usernameDom.value);???console.log(this.peopleInfo);}

為了稍微調整點樣式，在scss中添加幾個樣式

h2{text-align: center; }.people_list{width: 400px;margin: 40px auto;padding:20px;border:1px solid #eee;li{height: 50px;line-height: 50px;.fonm_input{width: 300px;height: 28px;}}.submit{width: 100px;height: 30px;float: right;margin-right: 50px;margin-top:120px;} }

效果

?

總結

以上是生活随笔為你收集整理的Angular中使用双向数据绑定操作表单的input、checkboc、radio、select、textarea实现简单的人员登记系统实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。