Angular 表单控件示例

前端之家收集整理的这篇文章主要介绍了Angular 表单控件示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文的主要是演示 Template-driven 中,一些常用控件的使用方式,仅供参考。具体请根据实际业务需求做相应调整。

本文将介绍 Angular Template-driven 表单中,常用控件的使用。涉及的表单控件如下:

  • text

  • number

  • radio

  • select (基本类型)

  • select (对象)

  • multi select

  • cascading select (级联操作)

  • checkBox (boolean)

  • multi checkBox

表单的局部效果

若想一睹真容,请直接查看 线上示例

数据接口

  1. export interface User {
  2. name: string; // 名字
  3. age?: number; // 年龄
  4. gender?: string; // 性别
  5. role?: string; // 角色
  6. theme?: Theme; // 主题
  7. isActive?: boolean; // 是否激活
  8. hobbies?: {[key: string]: boolean}; // 爱好
  9. topics?: string[]; // 话题
  10. province: number; // 省
  11. city: number; // 市
  12. }
  13.  
  14. export interface Theme {
  15. display: string; // 显示文本
  16. backgroundColor: string; // 背景颜色
  17. fontColor: string; // 字体颜色
  18. }

控件使用示例

Text

  1. <div class="form-group">
  2. <label>名字</label>
  3. <input type="text" class="form-control" name="name" [(ngModel)]="user.name">
  4. </div>

Number

  1. <div class="form-group">
  2. <label>年龄</label>
  3. <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
  4. </div>

Radio

数据

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

模板

  1. <div class="form-group">
  2. <label>性别</label>
  3. <label *ngFor="let gender of genders;">
  4. <input type="radio" name="gender" [(ngModel)]="user.gender"
  5. [value]="gender.value">
  6. {{gender.display}}
  7. </label>
  8. </div>

Select - 基本类型

数据

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

模板

  1. <div class="form-group">
  2. <label>角色</label>
  3. <select name="role" class="form-control" [(ngModel)]="user.role">
  4. <option *ngFor="let role of roles" [value]="role.value">
  5. {{role.display}}
  6. </option>
  7. </select>
  8. </div>

Select - 对象

数据

  1. themes: Theme[] = [
  2. { backgroundColor: 'black',fontColor: 'white',display: '黑色' },{ backgroundColor: 'white',fontColor: 'black',display: '白色' },{ backgroundColor: 'grey',display: '灰色' }
  3. ];

模板

  1. <div class="form-group">
  2. <label>主题</label>
  3. <select name="theme" class="form-control" [(ngModel)]="user.theme">
  4. <option *ngFor="let theme of themes" [ngValue]="theme">
  5. {{theme.display}}
  6. </option>
  7. </select>
  8. </div>

Mulit Select

数据

  1. topics = [
  2. { value: 'game',display: '游戏' },{ value: 'tech',display: '科技' },{ value: 'life',display: '生活' }
  3. ];

模板

  1. <div class="form-group">
  2. <label>话题</label>
  3. <select multiple name="topics" class="form-control" [(ngModel)]="user.topics">
  4. <option *ngFor="let topic of topics" [value]="topic.value">
  5. {{topic.display}}
  6. </option>
  7. </select>
  8. </div>

Cascading Select - 级联操作

数据

  1. provinces = [
  2. {pk:1,pv:'北京'},{pk:16,pv:'福建'}
  3. ];
  4.  
  5. citieData = [
  6. {pk:1,ck:72,cv:'朝阳区'},{pk:1,ck:2800,cv:'海淀区'},ck:2801,cv:'西城区'},{pk: 16,ck: 1303,cv: '福州市'},ck: 1315,cv: '厦门市'},ck: 1332,cv: '泉州市'}
  7. ];
  8.  
  9. cities = this.citieData.filter(city => city.pk === 16); // 默认福建省

模板

  1. <div class="form-group">
  2. <label>地址</label>
  3. <select name="province" class="form-control" [(ngModel)]="user.province"
  4. (change)="changeProvince($event.target.value)">
  5. <option *ngFor="let province of provinces" [value]="province.pk">
  6. {{province.pv}}
  7. </option>
  8. </select>
  9. <select name="city" class="form-control" [(ngModel)]="user.city">
  10. <option *ngFor="let city of cities" [value]="city.ck">
  11. {{city.cv}}
  12. </option>
  13. </select>
  14. </div>

CheckBox

模板

  1. <div class="form-group">
  2. <div class="checkBox">
  3. <label>
  4. <input type="checkBox" name="isActive" [(ngModel)]="user.isActive">
  5. 是否激活
  6. </label>
  7. </div>
  8. </div>

Multi CheckBox

数据

  1. hobbies = [
  2. { value: 'reading',display: '看书' },{ value: 'music',display: '听歌' },{ value: 'movie',display: '电影' }
  3. ];

模板

  1. <div class="form-group">
  2. <label>爱好</label>
  3. <span *ngFor="let hobby of hobbies">
  4. <input type="checkBox" name="bobby" [value]="hobby.value"
  5. [checked]="user.hobbies[hobby.value]"
  6. (change)="changeHobby(hobby,$event)" />
  7. {{hobby.display}}
  8. </span>
  9. </div>

完整示例

模板

  1. <h4>{{title}}</h4>
  2. <form #f="ngForm" novalidate>
  3. <div class="form-group">
  4. <label>名字</label>
  5. <input type="text" class="form-control" name="name" [(ngModel)]="user.name">
  6. </div>
  7. <div class="form-group">
  8. <label>年龄</label>
  9. <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
  10. </div>
  11. <div class="form-group">
  12. <label>性别</label>
  13. <label *ngFor="let gender of genders;">
  14. <input type="radio" name="gender" [(ngModel)]="user.gender"
  15. [value]="gender.value">
  16. {{gender.display}}
  17. </label>
  18. </div>
  19. <div class="form-group">
  20. <label>角色</label>
  21. <select name="role" class="form-control" [(ngModel)]="user.role">
  22. <option *ngFor="let role of roles" [value]="role.value">
  23. {{role.display}}</option>
  24. </select>
  25. </div>
  26. <div class="form-group">
  27. <label>主题</label>
  28. <select name="theme" class="form-control" [(ngModel)]="user.theme">
  29. <option *ngFor="let theme of themes" [ngValue]="theme">
  30. {{theme.display}}
  31. </option>
  32. </select>
  33. </div>
  34. <div class="form-group">
  35. <div class="checkBox">
  36. <label>
  37. <input type="checkBox" name="isActive" [(ngModel)]="user.isActive">
  38. 是否激活
  39. </label>
  40. </div>
  41. </div>
  42. <div class="form-group">
  43. <label>话题</label>
  44. <select multiple name="topics" class="form-control" [(ngModel)]="user.topics">
  45. <option *ngFor="let topic of topics" [value]="topic.value">
  46. {{topic.display}}
  47. </option>
  48. </select>
  49. </div>
  50. <div class="form-group">
  51. <label>爱好</label>
  52. <span *ngFor="let hobby of hobbies">
  53. <input type="checkBox" name="bobby" [value]="hobby.value"
  54. [checked]="user.hobbies[hobby.value]"
  55. (change)="changeHobby(hobby,$event)" />
  56. {{hobby.display}}
  57. </span>
  58. </div>
  59. <div class="form-group">
  60. <label>地址</label>
  61. <select name="province" class="form-control" [(ngModel)]="user.province"
  62. (change)="changeProvince($event.target.value)">
  63. <option *ngFor="let province of provinces" [value]="province.pk">
  64. {{province.pv}}
  65. </option>
  66. </select>
  67. <select name="city" class="form-control" [(ngModel)]="user.city">
  68. <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option>
  69. </select>
  70. </div>
  71. <button type="submit" (click)="save()" class="btn btn-default">保存</button>
  72. </form>

组件类

  1. export class AppComponent implements OnInit {
  2. title = '新增用户';
  3. user: User;
  4.  
  5. genders = [{ value: 'F',display: '男' }];
  6.  
  7. roles = [{ value: 'admin',display: '普通用户' }];
  8.  
  9. themes: Theme[] = [
  10. { backgroundColor: 'black',display: '灰色' }
  11. ];
  12.  
  13. topics = [
  14. { value: 'game',display: '生活' }
  15. ];
  16.  
  17. hobbies = [
  18. { value: 'reading',display: '电影' }
  19. ];
  20.  
  21. provinces = [
  22. {pk:1,pv:'福建'}
  23. ];
  24.  
  25. citieData = [
  26. {pk:1,cv: '泉州市'}
  27. ];
  28.  
  29. cities = this.citieData.filter(city => city.pk === 16);
  30.  
  31. changeHobby(hobby,event) {
  32. this.user.hobbies[hobby.value] = event.target.checked;
  33. }
  34.  
  35. changeProvince(pk) {
  36. this.cities = this.citieData.filter((city)=> city.pk == pk);
  37. this.user.city = this.cities[0].ck;
  38. }
  39.  
  40. ngOnInit(): void {
  41. this.user = {
  42. 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,// 福建省
  43. city: 1315 // 厦门市
  44. }
  45. }
  46.  
  47. save() {
  48. console.log(this.user);
  49. }
  50. }

参考资源

猜你在找的Angularjs相关文章