本文將介紹 Angular Template-driven 表單中，常用控件的使用。涉及的表單控件如下：
表單的局部效果
數據接口
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', fontColor: 'white', 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:'海淀區'}, {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 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
模板
<div class="form-group"> <div class="checkbox"> <label> <input type="checkbox" name="isActive" [(ngModel)]="user.isActive"> 是否激活 </label> </div></div>
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: '女' },{ 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); }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
