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. JS开发中常用的小技巧

    1.获取指定范围内的随机数 1 2 3 function getRadomNum(min,max){     return  Math.floor(Math.random() * (max - min ...

  2. MakeFile 详解

    最近在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了以下这篇文章.通俗易懂.然后把它贴出 ...

  3. MySQL 在高并发下的 订单撮合 系统使用 共享锁 与 排他锁 保证数据一致性

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  4. phpadmin dvwa sqli-labs xsser.me

    下载phpadmin,安装后网站根目录 phpStudy\PHPTutorial\WWW 将下载的dvwa文件夹放到该目录下,修改config/config.inc.php文件中的mysql连接信息. ...

  5. flask使用pymysql连接MySQL,生成xls文件并下载到本地

    版本一:将MySQL数据写入到excel(xsl)文件并下载到默认文件夹(一般问电脑的下载文件夹里面),并显示特效到前端页面. flask框架连接MySQL,我们使用pymsql这个工具,如下操作: ...

  6. pdf转html插件~~~pdf2htmlEX安装,配置及使用

    这是一个将pdf转化为html的服务,开源的. 此功能服务的代码在git上的地址为: https://github.com/coolwanglu/pdf2htmlEX/wiki 安装: 在ubuntu ...

  7. Javascript中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它(比如在函数中),会覆盖整个文档。

    意思就是说,初次加载时如果没有加载document.write,那么再次加载的时候回覆盖掉原来的内容,只显示新加载的内容. <!DOCTYPE html> <html> < ...

  8. 解决在Windows10没有修改hosts文件权限

    当遇到有hosts文件不会编辑或者,修改了没办法保存”,以及需要权限等问题如图: 我学了一招,先在交给你: 1.win+R 2.进入hosts的文件所在目录: 3.我们开始如何操作才能不出现权限问题那 ...

  9. 【转】前端框架天下三分:Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...

  10. Selenium IDE

    Selenium IDE : Selenium IDE作为Firefox浏览器的一款插件,依附于firefox浏览器,打开它的录制功能,它会忠实的记录,你对firefox的操作,并可以回放它所记录的你 ...