如何使用Angular表單控件-創(chuàng)新互聯(lián)

這篇文章給大家介紹如何使用Angular 表單控件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

站在用戶的角度思考問題，與客戶深入溝通，找到垣曲網(wǎng)站設(shè)計(jì)與垣曲網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋垣曲地區(qū)。

表單控件如下：

  1. text

  2. number

  3. radio

  4. select (基本類型)

  5. select (對(duì)象)

  6. multi select

  7. cascading select (級(jí)聯(lián)操作)

  8. checkbox (boolean)

  9. multi checkbox

數(shù)據(jù)接口

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

數(shù)據(jù)

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 - 基本類型

數(shù)據(jù)

復(fù)制代碼 代碼如下:

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 - 對(duì)象

數(shù)據(jù)

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

數(shù)據(jù)

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 - 級(jí)聯(lián)操作

數(shù)據(jù)

provinces = [
  {pk:1,pv:'北京'},
  {pk:16,pv:'福建'}
 ];

citieData = [
  {pk:1,ck:72,cv:'朝陽區(qū)'},{pk:1,ck:2800,cv:'海淀區(qū)'},
  {pk:1,ck:2801,cv:'西城區(qū)'},{pk: 16,ck: 1303,cv: '福州市'}, 
  {pk: 16,ck: 1315,cv: '廈門市'},{pk: 16,ck: 1332,cv: '泉州市'}
];

cities = this.citieData.filter(city => city.pk === 16); // 默認(rèn)福建省

模板

<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

數(shù)據(jù)

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>

完整示例

模板

<h5>{{title}}</h5>
<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:'朝陽區(qū)'},{pk:1,ck:2800,cv:'海淀區(qū)'},
  {pk:1,ck:2801,cv:'西城區(qū)'},{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);
 }
}

關(guān)于如何使用Angular 表單控件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：如何使用Angular表單控件-創(chuàng)新互聯(lián)
文章地址：http://muchs.cn/article40/dpphho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站制作、服務(wù)器托管、品牌網(wǎng)站建設(shè)、定制開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)