Angular 表单控件示例代码

Angular 表单控件示例代码

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

名字

Number

年龄

Radio

数据

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

模板

性别

[value]="gender.value">

{{gender.display}}

Select - 基本类型

数据

复制代码 代码如下:

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

模板

角色

{{role.display}}

Select - 对象

数据

themes: Theme[] = [

{ backgroundColor: 'black', fontColor: 'white', display: '黑色' },

{ backgroundColor: 'white', fontColor: 'black', display: '白色' },

{ backgroundColor: 'grey', fontColor: 'white', display: '灰色' }

];

模板

主题

{{theme.display}}

Mulit Select

数据

topics = [

{ value: 'game', display: '游戏' },

{ value: 'tech', display: '科技' },

{ value: 'life', display: '生活' }

];

模板

话题

{{topic.display}}

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); // 默认福建省

模板

地址

(change)="changeProvince($event.target.value)">

{{province.pv}}http://

(change)="changeProvince($event.target.value)">

{{province.pv}}http://

{{city.cv}}

Checkbox

模板

是否激活

Multi Checkbox

数据

hobbies = [

{ value: 'reading', display: '看书' },

{ value: 'music', display: '听歌' },

{ value: 'movie', display: '电影' }

];

模板

爱好

[checked]="user.hobbies[hobby.value]"

(change)="changeHobby(hobby, $event)" />

{{hobby.display}}

完整示例

模板

名字

年龄

性别

[value]="gender.value">

{{gender.display}}

角色

{{role.display}}

主题

{{theme.display}}

是否激活

话题

{{topic.display}}

爱好

[checked]="user.hobbies[hobby.value]"

(change)="changeHobby(hobby, $event)" />

{{hobby.display}}

地址

(change)="changeProvince($event.target.value)">

{{province.pv}}

(change)="changeProvince($event.target.value)">

{{province.pv}}

{{city.cv}}

保存

组件类

export class AppComponent implehttp://ments 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.uFPeDBnjhHser.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);

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。