这篇文章给大家介绍如何使用Angular 表单控件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联长期为上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为天峨企业提供专业的网站设计、成都做网站,天峨网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
表单控件如下:
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: '男' }];
模板
Select - 基本类型
数据
复制代码 代码如下:
roles = [{ value: 'admin', display: '管理员' },{ value: 'user', display: '普通用户' }];
模板
Select - 对象
数据
themes: Theme[] = [ { backgroundColor: 'black', fontColor: 'white', display: '黑色' }, { backgroundColor: 'white', fontColor: 'black', display: '白色' }, { backgroundColor: 'grey', fontColor: 'white', display: '灰色' } ];
模板
Mulit Select
数据
topics = [ { value: 'game', display: '游戏' }, { value: 'tech', display: '科技' }, { value: 'life', 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); // 默认福建省
模板
Checkbox
模板
Multi Checkbox
数据
hobbies = [ { value: 'reading', display: '看书' }, { value: 'music', display: '听歌' }, { value: 'movie', display: '电影' } ];
模板
{{hobby.display}}
完整示例
模板
{{title}}
组件类
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); } }
关于如何使用Angular 表单控件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。