Angular 表单控件示例代码

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>

<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', 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>

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:'海淀区'},  {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>

<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: '女' },{ 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); }}