Angular 表单控件示例代码


Posted in Javascript onJune 26, 2017

本文将介绍 Angular Template-driven 表单中,常用控件的使用。涉及的表单控件如下:

  1. text
  2. number
  3. radio
  4. select (基本类型)
  5. select (对象)
  6. multi select
  7. cascading select (级联操作)
  8. checkbox (boolean)
  9. multi checkbox

表单的局部效果

Angular 表单控件示例代码

数据接口

export interface User {
 name: string; // 名字
 age?: number; // 年龄
 gender?: string; // 性别
 role?: string; // 角色
 theme?: Theme; // 主题
 isActive?: boolean; // 是否激活
 hobbies?: {[key: string]: boolean}; // 爱好
 topics?: string[]; // 话题
 province: number; // 省
 city: number; // 市
}

export interface Theme {
 display: string; // 显示文本
 backgroundColor: string; // 背景颜色
 fontColor: string; // 字体颜色
}

控件使用示例

Text

<div class="form-group">
  <label>名字</label>
  <input type="text" class="form-control" name="name" [(ngModel)]="user.name">
</div>

Number

<div class="form-group">
  <label>年龄</label>
  <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
</div>

Radio

数据

genders = [{ value: 'F', display: '女' },{ value: 'M', display: '男' }];

模板

<div class="form-group">
  <label>性别</label>
   <label *ngFor="let gender of genders;">
   <input type="radio" name="gender" [(ngModel)]="user.gender" 
     [value]="gender.value">
      {{gender.display}}
 </label>
</div>

Select - 基本类型

数据

roles = [{ value: 'admin', display: '管理员' },{ value: 'user', display: '普通用户' }];

模板

<div class="form-group">
 <label>角色</label>
 <select name="role" class="form-control" [(ngModel)]="user.role">
   <option *ngFor="let role of roles" [value]="role.value">
    {{role.display}}
  </option>
 </select>
</div>

Select - 对象

数据

themes: Theme[] = [
 { backgroundColor: 'black', fontColor: 'white', display: '黑色' },
 { backgroundColor: 'white', fontColor: 'black', display: '白色' },
 { backgroundColor: 'grey', fontColor: 'white', display: '灰色' }
];

模板

<div class="form-group">
 <label>主题</label>
 <select name="theme" class="form-control" [(ngModel)]="user.theme">
   <option *ngFor="let theme of themes" [ngValue]="theme">
     {{theme.display}}
   </option>
  </select>
</div>

Mulit Select

数据

topics = [
 { value: 'game', display: '游戏' },
 { value: 'tech', display: '科技' },
 { value: 'life', display: '生活' }
];

模板

<div class="form-group">
  <label>话题</label>
  <select multiple name="topics" class="form-control" [(ngModel)]="user.topics">
   <option *ngFor="let topic of topics" [value]="topic.value">
     {{topic.display}}
   </option>
  </select>
</div>

Cascading Select - 级联操作

数据

provinces = [
  {pk:1,pv:'北京'},
  {pk:16,pv:'福建'}
 ];

citieData = [
  {pk:1,ck:72,cv:'朝阳区'},{pk:1,ck:2800,cv:'海淀区'},
  {pk:1,ck:2801,cv:'西城区'},{pk: 16,ck: 1303,cv: '福州市'}, 
  {pk: 16,ck: 1315,cv: '厦门市'},{pk: 16,ck: 1332,cv: '泉州市'}
];

cities = this.citieData.filter(city => city.pk === 16); // 默认福建省

模板

<div class="form-group">
  <label>地址</label>
  <select name="province" class="form-control" [(ngModel)]="user.province" 
   (change)="changeProvince($event.target.value)">
     <option *ngFor="let province of provinces" [value]="province.pk">
       {{province.pv}}
     </option>
  </select>
  <select name="city" class="form-control" [(ngModel)]="user.city">
    <option *ngFor="let city of cities" [value]="city.ck">
     {{city.cv}}
    </option>
  </select>
</div>

Checkbox

模板

<div class="form-group">
  <div class="checkbox">
   <label>
    <input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
      是否激活
   </label>
  </div>
</div>

Multi Checkbox

数据

hobbies = [
 { value: 'reading', display: '看书' },
 { value: 'music', display: '听歌' },
 { value: 'movie', display: '电影' }
];

模板

<div class="form-group">
  <label>爱好</label>
  <span *ngFor="let hobby of hobbies">
    <input type="checkbox" name="bobby" [value]="hobby.value" 
     [checked]="user.hobbies[hobby.value]"
     (change)="changeHobby(hobby, $event)" />
       {{hobby.display}}
  </span>
</div>

完整示例

模板

<h4>{{title}}</h4>
<form #f="ngForm" novalidate>
   <div class="form-group">
    <label>名字</label>
    <input type="text" class="form-control" name="name" [(ngModel)]="user.name">
   </div>
   <div class="form-group">
    <label>年龄</label>
    <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
   </div>
   <div class="form-group">
    <label>性别</label>
    <label *ngFor="let gender of genders;">
     <input type="radio" name="gender" [(ngModel)]="user.gender" 
      [value]="gender.value">
      {{gender.display}}
    </label>
   </div>
   <div class="form-group">
    <label>角色</label>
    <select name="role" class="form-control" [(ngModel)]="user.role">
     <option *ngFor="let role of roles" [value]="role.value">
      {{role.display}}</option>
    </select>
   </div>
   <div class="form-group">
    <label>主题</label>
    <select name="theme" class="form-control" [(ngModel)]="user.theme">
     <option *ngFor="let theme of themes" [ngValue]="theme">
      {{theme.display}}
     </option>
    </select>
   </div>
   <div class="form-group">
    <div class="checkbox">
     <label>
      <input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
      是否激活
     </label>
    </div>
   </div>
   <div class="form-group">
    <label>话题</label>
    <select multiple name="topics" class="form-control" [(ngModel)]="user.topics">
     <option *ngFor="let topic of topics" [value]="topic.value">
      {{topic.display}}
     </option>
    </select>
   </div>
   <div class="form-group">
    <label>爱好</label>
    <span *ngFor="let hobby of hobbies">
      <input type="checkbox" name="bobby" [value]="hobby.value" 
          [checked]="user.hobbies[hobby.value]"
       (change)="changeHobby(hobby, $event)" />
      {{hobby.display}}
    </span>
   </div>
   <div class="form-group">
    <label>地址</label>
    <select name="province" class="form-control" [(ngModel)]="user.province" 
     (change)="changeProvince($event.target.value)">
     <option *ngFor="let province of provinces" [value]="province.pk">
      {{province.pv}}
     </option>
    </select>
    <select name="city" class="form-control" [(ngModel)]="user.city">
     <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option>
    </select>
   </div>
   <button type="submit" (click)="save()" class="btn btn-default">保存</button>
</form>

组件类

export class AppComponent implements OnInit {
 title = '新增用户';
 user: User;

 genders = [{ value: 'F', display: '女' },{ value: 'M', display: '男' }];

 roles = [{ value: 'admin', display: '管理员' },{ value: 'user', display: '普通用户' }];

 themes: Theme[] = [
  { backgroundColor: 'black', fontColor: 'white', display: '黑色' },
  { backgroundColor: 'white', fontColor: 'black', display: '白色' },
  { backgroundColor: 'grey', fontColor: 'white', display: '灰色' }
 ];

 topics = [
  { value: 'game', display: '游戏' },
  { value: 'tech', display: '科技' },
  { value: 'life', display: '生活' }
 ];

 hobbies = [
  { value: 'reading', display: '看书' },
  { value: 'music', display: '听歌' },
  { value: 'movie', display: '电影' }
 ];

 provinces = [
  {pk:1,pv:'北京'},
  {pk:16,pv:'福建'}
 ];

 citieData = [
  {pk:1,ck:72,cv:'朝阳区'},{pk:1,ck:2800,cv:'海淀区'},
  {pk:1,ck:2801,cv:'西城区'},{pk: 16,ck: 1303,cv: '福州市'}, 
  {pk: 16,ck: 1315,cv: '厦门市'},{pk: 16,ck: 1332,cv: '泉州市'}
 ];

 cities = this.citieData.filter(city => city.pk === 16);

 changeHobby(hobby, event) {
  this.user.hobbies[hobby.value] = event.target.checked;
 }

 changeProvince(pk) {
  this.cities = this.citieData.filter((city)=> city.pk == pk);
  this.user.city = this.cities[0].ck;
 }

 ngOnInit(): void {
  this.user = {
   name: '',
   gender: this.genders[0].value,
   role: this.roles[1].value,
   theme: this.themes[0],
   isActive: false,
   hobbies: {'music': true},
   topics: [this.topics[1].value],
   province: 16, // 福建省
   city: 1315 // 厦门市
  }
 }

  save() {
  console.log(this.user);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS的拖拽效果示例
Dec 09 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
javascript实现回到顶部特效
May 06 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 #Javascript
jQuery实现frame之间互通的方法
Jun 26 #jQuery
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 #Javascript
jQuery回调方法使用示例
Jun 26 #jQuery
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 #Javascript
You might like
php 一元分词算法
2009/11/30 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php强制下载类型的实现代码
2011/04/21 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python中使用序列的方法
2015/08/03 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
家长评语大全
2014/01/22 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
学校春季防火方案
2014/06/08 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
预备党员转正材料
2014/12/19 职场文书
单位委托函范文
2015/01/29 职场文书
城南旧事观后感
2015/06/11 职场文书
信用卡收入证明范本
2015/06/12 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Redis唯一ID生成器的实现
2022/07/07 Redis