如何使用Angular表单控件-创新互联

这篇文章给大家介绍如何使用Angular 表单控件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

站在用户的角度思考问题，与客户深入沟通，找到垣曲网站设计与垣曲网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、做网站、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟空间、企业邮箱。业务覆盖垣曲地区。

表单控件如下：

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: '男' }];

模板


  性别
   
   
      {{gender.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: '灰色' } ];

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

名字

年龄

性别 {{gender.display}} 角色

{{role.display}} 主题

{{theme.display}} 是否激活

话题

{{topic.display}} 爱好 {{hobby.display}} 地址

{{province.pv}} {{city.cv}} 保存

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 表单控件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

重庆分公司，新征程启航

如何使用Angular表单控件-创新互联

{{title}}

其他资讯