Angular 表单控件示例

本文的主要是演示 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 - 基本类型

数据

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

模板

<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);
  }
}

参考资源

• plnkr - 线上示例