本文的主要是演示 Template-driven 中,一些常用控件的使用方式,仅供参考。具体请根据实际业务需求做相应调整。
本文将介绍 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
- <div class="form-group">
- <label>名字</label>
- <input type="text" class="form-control" name="name" [(ngModel)]="user.name">
- </div>
Number
- <div class="form-group">
- <label>年龄</label>
- <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
- </div>
Radio
数据
- 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>
Select - 基本类型
数据
模板
- <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>
Select - 对象
数据
- 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>
Mulit Select
数据
- 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>
Cascading Select - 级联操作
数据
- 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>
CheckBox
模板
Multi CheckBox
数据
- 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);
- }
- }