Angular 表单控件示例代码

本文将介绍 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

表单的局部效果

数据接口

rush:js;"> 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

rush:xhtml;">

名字

Number

rush:xhtml;">

年龄

Radio

数据

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

模板

rush:xhtml;">

性别 dio" name="gender" [(ngModel)]="user.gender" [value]="gender.value"> {{gender.display}}

Select - 基本类型

数据

代码如下:

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

模板

rush:xhtml;">

角色 display}}

Select - 对象

数据

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

模板

rush:xhtml;">

主题 display}}

Mulit Select

数据

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

模板

rush:xhtml;">

话题 display}}

Cascading Select - 级联操作

数据

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

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

模板

rush:xhtml;">

地址

CheckBox

模板

rush:xhtml;">

Box"> Box" name="isActive" [(ngModel)]="user.isActive"> 是否激活

Multi CheckBox

数据

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

模板

rush:xhtml;">

爱好 {{hobby.display}}

完整示例

模板

rush:xhtml;">

{{title}}

名字

年龄

性别 dio" name="gender" [(ngModel)]="user.gender" [value]="gender.value"> {{gender.display}}

角色 display}}

主题 display}}

Box"> Box" name="isActive" [(ngModel)]="user.isActive"> 是否激活

话题 display}}

爱好 {{hobby.display}}

地址

组件类

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

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

themes: Theme[] = [
{ backgroundColor: 'black',display: '灰色' }
];

topics = [
{ value: 'game',display: '生活' }
];

hobbies = [
{ value: 'reading',display: '电影' }
];

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

citieData = [
{pk:1,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);
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。