小程序游戏代码_Angular 表单控件示例代码

Angular 表单控件示例代码       本文的主要是演示 Template-driven 中,一些常用控件的使用方式,仅供参考。具体请根据实际业务需求做相应调整。

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

text number radio select (基本类型) select (对象) multi select cascading select (级联操作) checkbox (boolean) multi checkbox

表单的局部效果

数据接口

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 
 label 名字 /label 
 input type="text" name="name" [(ngModel)]="user.name" 
 /div 

Number

 div 
 label 年龄 /label 
 input type="number" name="age" [(ngModel)]="user.age" 
 /div 

Radio

数据

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

模板

 div 
 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 
 label 角色 /label 
 select name="role" [(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 
 label 主题 /label 
 select name="theme" [(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 
 label 话题 /label 
 select multiple name="topics" [(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 
 label 地址 /label 
 select name="province" [(ngModel)]="user.province" 
 (change)="changeProvince($event.target.value)" 
 option *ngFor="let province of provinces" [value]="province.pk" 
 {{province.pv}}
 /option 
 /select 
 select name="city" [(ngModel)]="user.city" 
 option *ngFor="let city of cities" [value]="city.ck" 
 {{city.cv}}
 /option 
 /select 
 /div 

Checkbox

模板

 div 
 div 
 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 
 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 
 label 名字 /label 
 input type="text" name="name" [(ngModel)]="user.name" 
 /div 
 div 
 label 年龄 /label 
 input type="number" name="age" [(ngModel)]="user.age" 
 /div 
 div 
 label 性别 /label 
 label *ngFor="let gender of genders;" 
 input type="radio" name="gender" [(ngModel)]="user.gender" 
 [value]="gender.value" 
 {{gender.display}}
 /label 
 /div 
 div 
 label 角色 /label 
 select name="role" [(ngModel)]="user.role" 
 option *ngFor="let role of roles" [value]="role.value" 
 {{role.display}} /option 
 /select 
 /div 
 div 
 label 主题 /label 
 select name="theme" [(ngModel)]="user.theme" 
 option *ngFor="let theme of themes" [ngValue]="theme" 
 {{theme.display}}
 /option 
 /select 
 /div 
 div 
 div 
 label 
 input type="checkbox" name="isActive" [(ngModel)]="user.isActive" 
 是否激活
 /label 
 /div 
 /div 
 div 
 label 话题 /label 
 select multiple name="topics" [(ngModel)]="user.topics" 
 option *ngFor="let topic of topics" [value]="topic.value" 
 {{topic.display}}
 /option 
 /select 
 /div 
 div 
 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 
 label 地址 /label 
 select name="province" [(ngModel)]="user.province" 
 (change)="changeProvince($event.target.value)" 
 option *ngFor="let province of provinces" [value]="province.pk" 
 {{province.pv}}
 /option 
 /select 
 select name="city" [(ngModel)]="user.city" 
 option *ngFor="let city of cities" [value]="city.ck" {{city.cv}} /option 
 /select 
 /div 
 button type="submit" (click)="save()" 保存 /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);

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




扫描二维码分享到微信