大佬教程收集整理的这篇文章主要介绍了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; // 字体颜色 }
<div class="form-group"> <label>名字</label> <input type="text" class="form-control" name="name" [(ngModel)]="user.name"> </div>
<div class="form-group"> <label>年龄</label> <input type="number" class="form-control" name="age" [(ngModel)]="user.age"> </div>
genders = [{ value: 'F',display: '女' },{ value: 'M',display: '男' }];
<div class="form-group"> <label>性别</label> <label *ngFor="let gender of genders;"> <input type="radio" name="gender" [(ngModel)]="user.gender" [value]="gender.value"> {{gender.display}} </label> </div>
roles = [{ value: 'admin',display: '管理员' },{ value: 'user',display: '普通用户' }];
<div class="form-group"> <label>角色</label> <select name="role" class="form-control" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [value]="role.value"> {{role.display}} </option> </select> </div>
themes: Theme[] = [ { backgroundColor: 'black',fontColor: 'white',display: '黑色' },{ backgroundColor: 'white',fontColor: 'black',display: '白色' },{ backgroundColor: 'grey',display: '灰色' } ];
<div class="form-group"> <label>主题</label> <select name="theme" class="form-control" [(ngModel)]="user.theme"> <option *ngFor="let theme of themes" [ngValue]="theme"> {{theme.display}} </option> </select> </div>
topics = [ { value: 'game',display: '游戏' },{ value: 'tech',display: '科技' },{ value: 'life',display: '生活' } ];
<div class="form-group"> <label>话题</label> <select multiple name="topics" class="form-control" [(ngModel)]="user.topics"> <option *ngFor="let topic of topics" [value]="topic.value"> {{topic.display}} </option> </select> </div>
provinces = [ {pk:1,pv:'北京'},{pk:16,pv:'福建'} ]; 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); // 默认福建省
<div class="form-group"> <label>地址</label> <select name="province" class="form-control" [(ngModel)]="user.province" (change)="changeProvince($event.target.value)"> <option *ngFor="let province of provinces" [value]="province.pk"> {{province.pv}} </option> </select> <select name="city" class="form-control" [(ngModel)]="user.city"> <option *ngFor="let city of cities" [value]="city.ck"> {{city.cv}} </option> </select> </div>
<div class="form-group"> <div class="checkBox"> <label> <input type="checkBox" name="isActive" [(ngModel)]="user.isActive"> 是否激活 </label> </div> </div>
hobbies = [ { value: 'reading',display: '看书' },{ value: 'music',display: '听歌' },{ value: 'movie',display: '电影' } ];
<div class="form-group"> <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 class="form-group"> <label>名字</label> <input type="text" class="form-control" name="name" [(ngModel)]="user.name"> </div> <div class="form-group"> <label>年龄</label> <input type="number" class="form-control" name="age" [(ngModel)]="user.age"> </div> <div class="form-group"> <label>性别</label> <label *ngFor="let gender of genders;"> <input type="radio" name="gender" [(ngModel)]="user.gender" [value]="gender.value"> {{gender.display}} </label> </div> <div class="form-group"> <label>角色</label> <select name="role" class="form-control" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [value]="role.value"> {{role.display}}</option> </select> </div> <div class="form-group"> <label>主题</label> <select name="theme" class="form-control" [(ngModel)]="user.theme"> <option *ngFor="let theme of themes" [ngValue]="theme"> {{theme.display}} </option> </select> </div> <div class="form-group"> <div class="checkBox"> <label> <input type="checkBox" name="isActive" [(ngModel)]="user.isActive"> 是否激活 </label> </div> </div> <div class="form-group"> <label>话题</label> <select multiple name="topics" class="form-control" [(ngModel)]="user.topics"> <option *ngFor="let topic of topics" [value]="topic.value"> {{topic.display}} </option> </select> </div> <div class="form-group"> <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 class="form-group"> <label>地址</label> <select name="province" class="form-control" [(ngModel)]="user.province" (change)="changeProvince($event.target.value)"> <option *ngFor="let province of provinces" [value]="province.pk"> {{province.pv}} </option> </select> <select name="city" class="form-control" [(ngModel)]="user.city"> <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option> </select> </div> <button type="submit" (click)="save()" class="btn btn-default">保存</button> </form>
export class AppComponent implements OnInit { title = '新增用户'; user: User; 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); } }
以上是大佬教程为你收集整理的Angular 表单控件示例全部内容,希望文章能够帮你解决Angular 表单控件示例所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。