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. MySql.Data.dll官网下载

    Mysql.Data.dll官网下载 在项目开发中链接MySQL数据库经常要用到Mysql.Data.dll,网上虽然有很多,但是还是比较信赖官网的 今天就从官网下载一次记录一下过程 1.下载地址 官 ...

  2. springBoot整合ftp上传图片功能

    知识点: springBoot后端项目,接收前端框架传到的图片,把图片上传到ftp图片服务器上 注意:在上传的过程中可能回出现,可以创建文件夹,但是图片上传不了的问题: 尝试了网上的很多方法,最后将f ...

  3. nginx 报错 connect() failed (111: Connection refused) while connecting to upstream

    公司网站搬迁到新服务器后,发现站点访问不了,network里面提示502,查看相关的server配置,感觉没有什么问题,经过测试发现txt.html.等非php文件能够直接访问,也就是php访问不了, ...

  4. Linux下的搜索查找命令的详解(whereis)

    2.whereis  和find相比,whereis查找的速度非常快,这是因为linux系统会将 系统内的所有文件都记录在一个数据库文件中,当使用whereis和下面即将介绍的locate时,会从数据 ...

  5. cs231n笔记 (一) 线性分类器

    Liner classifier 线性分类器用作图像分类主要有两部分组成:一个是假设函数, 它是原始图像数据到类别的映射.另一个是损失函数,该方法可转化为一个最优化问题,在最优化过程中,将通过更新假设 ...

  6. Ubuntu下安装LNMP

    1.安装mysql sudo apt-get install mysql-server mysql-client 2.安装nginx sudo apt-get install nginx 安装完后重启 ...

  7. aes 和 Md5 分析

    高级加密标准(英语:Advanced Encryption Standard,缩写:AES). 密码的设计力求满足以下3条标准: ① 抵抗所有已知的攻击. ② 在多个平台上速度快,编码紧凑. ③ 设计 ...

  8. phpredis Redis集群 Redis Cluster

    官方url: https://github.com/phpredis/phpredis/blob/develop/cluster.markdown#readme 2017年10月29日20:44:25 ...

  9. InnoDB中锁的模式

    Ⅰ.总览 S行级共享锁 lock in share mode X行级排它锁 增删改 IS意向共享锁 IX意向排他锁 AI自增锁 Ⅱ.锁之间的兼容性 兼 X IX S IS X × × × × IX × ...

  10. Ubuntu 使用命令行连接无线网

    一.查看可以使用的无线网: nmcli dev wifi 二.连接无线网: nmcli dev wifi connect ‘essid’(网络名称) password ‘password’(密码) 可 ...