# Angular 表单、Dom 获取表单值、以及双向数据绑定
ng new angulardemo04
ng g component components/form
- app.module.ts
import {FormsModule} from '@angular/forms'
@NgModule({
declarations: [
AppComponent,
FormComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- app.component.html
<app-form></app-form>
- style.scss
/* You can add global styles to this file, and also import other style files */
*{
margin: 0px;
padding: 0px;
}
ul, ol{
list-style-type: none;
}
- form.components.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
public peopleInfo:any = {
username: 'Jalen',
sex: '2',
cityList: ['北京', '上海', '深圳'],
city: '北京',
hobby:[{
title: '吃饭',
checked: false
},{
title: '睡觉',
checked: false
},{
title: '敲代码',
checked: true
}],
mark: ''
}
constructor() { }
ngOnInit(): void {
}
doSubmit(e:any){
//1.jquery dom 操作
// let nameDom:any = document.getElementById("username")
// alert(nameDom.value)
//2. 双向数据绑定
console.log(this.peopleInfo)
}
}
- form.component.scss
h2{
text-align: center;
}
.people_list{
width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #eee;
li{
height: 50px;
line-height: 50px;
.form_input{
width: 300px;
height: 30px;
}
}
.submit{
width: 100px;
height: 30px;
float: right;
margin-right: 50px;
margin-top: 70px;
}
.pre-view{
margin-top: 30px;
}
}
- form.component.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>
</span>
</li>
<li>备 注:
<!-- <input type="textarea" name="mark" id="mark" [(ngModel)]="peopleInfo.mark" cols="30" rows="10"/> -->
<textarea name="mark" id="mark" [(ngModel)]="peopleInfo.mark" rows="4" cols="50"></textarea>
</li>
</ul>
<button (click)="doSubmit($event)" class="submit">获取表单的内容</button>
<br>
<br>
<pre class="pre-view">
{{peopleInfo | json}}
</pre>
</div>