Angular学习系列三:组件:表单数据读取
1:使用vscode打开事先准备好的空项目
2:创建表单组件:ng g component components/form
3:在app.component.html中引用该标签:<app-form></app-form>
4:引用表单组件,才能实现双向绑定,在app.module.ts里面:
import {FormsModule} from '@angular/forms'; 并在imports中配置组件:FormsModule
5:表单数据绑定:文本框,单选框,复选框,文本域 数据读取
界面(form.component.html)代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <p>form works!</p> 2 <div> 3 <table> 4 <tr> 5 <td>name</td> 6 <td> 7 <input id='name' [(ngModel)]="peopleInfo.name" /> 8 </td> 9 </tr> 10 <tr> 11 <td>gender:</td> 12 <td> 13 <input type="radio" value='male' [(ngModel)]="peopleInfo.gender" id="gender1" name="gender"> 14 <label for='gender1'>男</label> 15 16 <input type="radio" value='female' [(ngModel)]="peopleInfo.gender" id="gender2" name="gender"> 17 <label for='gender2'>女</label> 18 </td> 19 </tr> 20 <tr> 21 <td>city</td> 22 <td> 23 <select name='city' id='city' [(ngModel)]="peopleInfo.city"> 24 <option [value]='item' *ngFor="let item of peopleInfo.cities">{{item}}</option> 25 </select> 26 </td> 27 </tr> 28 <tr> 29 <td>爱好</td> 30 <td> 31 <span *ngFor="let item of peopleInfo.hobby;let key=index"> 32 <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"><label 33 [for]="'check'+key">{{item.title}}</label> 34 </span> 35 </td> 36 </tr> 37 <tr> 38 <td> 39 备注: 40 </td> 41 <td> 42 <textarea name='mark' cols=30 rows='10' [(ngModel)]="peopleInfo.mark"></textarea> 43 </td> 44 </tr> 45 <tr> 46 <td><button (click)="doSubmit()">提交</button></td> 47 <td></td> 48 </tr> 49 <tr> 50 <td> 51 结果输出: 52 </td> 53 <td> 54 <pre> 55 {{peopleInfo | json}} 56 </pre> 57 </td> 58 </tr> 59 </table> 60 </div>
组件(form.component.ts)代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import { Component, OnInit } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-form', 5 templateUrl: './form.component.html', 6 styleUrls: ['./form.component.css'] 7 }) 8 export class FormComponent implements OnInit { 9 public peopleInfo: any = { 10 name: '默认name', 11 gender: "female", 12 cities: [ 13 'beijing', 14 'shanghai', 15 'guangzhou' 16 17 ], 18 city:'', 19 hobby:[ 20 {title:"逛街",checked:false}, 21 {title:"读书",checked:false}, 22 {title:"打球",checked:false}, 23 {title:"旅游",checked:false}, 24 {title:"健身",checked:false}, 25 ], 26 mark:"", 27 28 }; 29 constructor() { } 30 31 ngOnInit() { 32 } 33 34 doSubmit() { 35 console.log(this.peopleInfo); 36 } 37 }
界面效果: