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> <label>名字</label> <input type="text" [(ngModel)]="user.name"> </div>
Number
<div> <label>年龄</label> <input type="number" [(ngModel)]="user.age"> </div>
Radio
数据
genders = [{ value: 'F', display: '女' },{ value: 'M', display: '男' }];
模板
<div> <label>性别</label> <label *ngFor="let gender of genders;"> <input type="radio" [(ngModel)]="user.gender" [value]="gender.value"> {{gender.display}} </label> </div>
Select - 基本类型
数据
复制代码 代码如下:
roles = [{ value: 'admin', display: '管理员' },{ value: 'user', display: '普通用户' }];
模板
<div> <label>角色</label> <select [(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', fontColor: 'white', display: '灰色' } ];
模板
<div> <label>主题</label> <select [(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> <label>话题</label> <select multiple [(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:'海淀区'}, {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); // 默认福建省
模板
<div> <label>地址</label> <select [(ngModel)]="user.province" (change)="changeProvince($event.target.value)"> <option *ngFor="let province of provinces" [value]="province.pk"> {{province.pv}} </option> </select> <select [(ngModel)]="user.city"> <option *ngFor="let city of cities" [value]="city.ck"> {{city.cv}} </option> </select> </div>
Checkbox
模板
<div> <div> <label> <input type="checkbox" [(ngModel)]="user.isActive"> 是否激活 </label> </div> </div>
Multi Checkbox
数据
hobbies = [ { value: 'reading', display: '看书' }, { value: 'music', display: '听歌' }, { value: 'movie', display: '电影' } ];
模板
<div> <label>爱好</label> <span *ngFor="let hobby of hobbies"> <input type="checkbox" [value]="hobby.value" [checked]="user.hobbies[hobby.value]" (change)="changeHobby(hobby, $event)" /> {{hobby.display}} </span> </div>
完整示例
模板
<h4>{{title}}</h4> <form #f="ngForm" novalidate> <div> <label>名字</label> <input type="text" [(ngModel)]="user.name"> </div> <div> <label>年龄</label> <input type="number" [(ngModel)]="user.age"> </div> <div> <label>性别</label> <label *ngFor="let gender of genders;"> <input type="radio" [(ngModel)]="user.gender" [value]="gender.value"> {{gender.display}} </label> </div> <div> <label>角色</label> <select [(ngModel)]="user.role"> <option *ngFor="let role of roles" [value]="role.value"> {{role.display}}</option> </select> </div> <div> <label>主题</label> <select [(ngModel)]="user.theme"> <option *ngFor="let theme of themes" [ngValue]="theme"> {{theme.display}} </option> </select> </div> <div> <div> <label> <input type="checkbox" [(ngModel)]="user.isActive"> 是否激活 </label> </div> </div> <div> <label>话题</label> <select multiple [(ngModel)]="user.topics"> <option *ngFor="let topic of topics" [value]="topic.value"> {{topic.display}} </option> </select> </div> <div> <label>爱好</label> <span *ngFor="let hobby of hobbies"> <input type="checkbox" [value]="hobby.value" [checked]="user.hobbies[hobby.value]" (change)="changeHobby(hobby, $event)" /> {{hobby.display}} </span> </div> <div> <label>地址</label> <select [(ngModel)]="user.province" (change)="changeProvince($event.target.value)"> <option *ngFor="let province of provinces" [value]="province.pk"> {{province.pv}} </option> </select> <select [(ngModel)]="user.city"> <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option> </select> </div> <button type="submit" (click)="save()">保存</button> </form>
组件类