Angular 表单控件示例代码

程序员文章站 2022-05-26 08:24:54

本文将介绍 angular template-driven 表单中，常用控件的使用。涉及的表单控件如下： text number radio s...

本文将介绍 angular template-driven 表单中，常用控件的使用。涉及的表单控件如下：

text
number
radio
select (基本类型)
select (对象)
multi select
cascading select (级联操作)
checkbox (boolean)
multi checkbox

表单的局部效果

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; // 字体颜色
}

控件使用示例

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Vue之Watcher源码解析（2）

下一篇： JavaScript 用fetch 实现异步下载文件功能

Angular 表单控件示例代码

Android官方的侧滑控件DrawerLayout的示例代码

WPF实现控件拖动的示例代码

C# WPF 父控件通过使用可视化树找到子控件的示例代码

Android官方的侧滑控件DrawerLayout的示例代码

Android实现日历控件示例代码

C# WPF 父控件通过使用可视化树找到子控件的示例代码

WPF实现控件拖动的示例代码

HTML5注册表单的自动聚焦与占位文本示例代码

Android实现日历控件示例代码

vue实现可视化可拖放的自定义表单的示例代码