使用ngModel实现表单的数据处理:
在使用angular表单双向数据绑定之前,需要在app.module.ts引入FormsModule模块。
import { FormsModule } from '@angular/forms';
imports: [FormsModule]
html:
<div>
<h2>表单登记</h2>
<div class="people_list">
<ul>
<li class="form_input">姓名:<input type="text" [(ngModel)]="peopleInfo.username"></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]="city" *ngFor="let city of peopleInfo.cityList">{{city}}</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>
</span>
</li>
<li>备注:
<textarea name="mark" id="mark" cols="30" rows="5" [(ngModel)]="peopleInfo.mark"></textarea>
</li>
</ul>
<button class="btn" (click)="doSubmit()">获取表单的内容</button>
</div>
<pre>
{{peopleInfo | json}}
</pre>
</div>
ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
public peopleInfo: any = {
username: '',
sex: '2',
cityList: ['北京', '上海', '深圳'],
city: '上海',
hobby: [{
title: '吃饭',
checked: false
},{
title: '睡觉',
checked: false
},{
title: '打豆豆',
checked: true
}],
mark: ''
}
constructor() { }
ngOnInit() {
}
doSubmit() {
console.log(this.peopleInfo);
}
}
效果图: