Angular 表单 input、checkbox、radio、 select、 textarea 实现在线预约功能

html 文件

<h2>人员登记系统</h2>

<div class="people_list">
<ul>
<li>姓 名:<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_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>

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:'2',
cityList:['北京','上海','深圳'],
city:'上海', hobby:[{ title:'吃饭',
checked:false
},{ title:'睡觉',
checked:false
},{ title:'敲代码',
checked:true
}], mark:'' } constructor() { } ngOnInit() {
} doSubmit(){ /*
jquery dom操作 <input type="text" id="username" />
let usernameDom:any=document.getElementById('username');
console.log(usernameDom.value);
*/ console.log(this.peopleInfo); } }

css 文件

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; }
}

Angular7 表单的更多相关文章

  1. ASP.NET Aries 入门开发教程9:业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 探索ASP.NET MVC5系列之~~~3.视图篇(下)---包含常用表单和暴力解猜防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  3. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路(5)- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net erp(办公oa)开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. from表单提交数据之后,后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

随机推荐

  1. 使用npm安装webpack失败时,可能被墙要为cmd命令行设置代理

    一.搜索到的相关概念: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. npm是 Node packaged Modules(node的包管理工具).本身用n ...

  2. [原]CentOS 7 chrony 笔记

    ~]# timedatectl status Local -- :: CST ==> 本地系统实际时间,设置时间timedatectl set-:: 设置日期timedatectl set- 设 ...

  3. python3 小工具

    扫描IP的端口是否开放:Porttest.py # -*- coding: utf-8 -*- import sys import os import socket #扫描 def scanport( ...

  4. C# 日期时间

    --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日时分秒      currentTime=System. ...

  5. Prime Flip AtCoder - 2689

    发现我们每次区间取反,相邻位置的正反关系只有两个位置发生改变 我们定义bi为ai和ai-1的正反关系,即ai=ai-1时bi=0,否则bi=1,每次取反l~r,b[l]和b[r+1]会发生改变 容易发 ...

  6. vue基本语法

    使用"{{ }}"来插入文本 使用v-html来插入html元素 v-bind给元素绑定属性,例如下面的,将title属性指定为data.title相同的值.v-bind指令后面的 ...

  7. linux --nginx篇

    NGINX是什么? nginx是开源的,支持高性能的,高并发的www服务和代理服务软件,就是web服务器,nginx不但是一个优秀的web服务软件,还可以做反向代理,负载均衡,以及缓存服务使用. 优点 ...

  8. ML.NET 0.10特性简介

    IDataView被单独作为一个类库包 IDataView组件为表格式数据提供了非常高效的处理方式,尤其是用于机器学习和高级分析应用.它被设计为可以高效地处理高维数据和大型数据集.并且也适合处理属于更 ...

  9. OAuth2.0的原理介绍

    OAuth2.0是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. OAuth2.0(开放授权)是一个正式的互联网标准协议. 允许第三方网站在用户 ...

  10. word2vec生成词向量和字向量

    生成字符向量的过程中需要注意: 1)在收集数据生成corpus时候,通过Word2Vec生成字向量的时候,产生了“ ”空格字符向量,但是加载模型是不会成功的.那么你不是生成的binary文件,就可以修 ...