angular表单 Dom获取表单值以及双向数据绑定
1.app.module.ts中：
import { FormsModule } from "@angular/forms";
imports:{
FormsModule
]
案例：
HTML
人员登记系统
{{peopleInfo|json}}
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: "",
sex: "1",
cityList: ["北京", "上海", "深圳"],
city: "北京",
hobby: [
{
title: "吃饭",
checked: false
},
{
title: "睡觉",
checked: false
},
{
title: "敲代码",
checked: true
}
],
mark:""
}
constructor() { }
ngOnInit() {
}
doSubmit() {
let usernameDom: any = document.getElementById('username');
console.log(usernameDom.value);
}
}
scss
h2{
text-align: center;
}
.people_list{
// background-color:red;
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px snow blue;
li{
height: 50px;
line-height: 50px;
.form_input{
width: 300px;
height: 40px;
}
}
.submit{
width: 100px;
height: 30px;
float: right;
margin-top: 120px;
}
}
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
暂时没有评论，来抢沙发吧~