搜尋
首頁web前端js教程angular學習之聊兩種類型的表單

angular學習之聊兩種類型的表單

May 20, 2022 am 10:28 AM
angularangular.js

這篇文章帶大家了解一下angular中的表單,了解一下兩種類型的表單:模板驅動和模型驅動,希望對大家有幫助!

angular學習之聊兩種類型的表單

在 Angular 中,表單有兩種類型,分別為範本驅動模型驅動。 【相關教學推薦:《angular教學》】

一、範本驅動

##1.1 概述

表單的

控制邏輯寫在元件範本中,適合簡單的表單類型。

1.2 快速上手

1)、引入依賴模組FormsModule

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

2)、將DOM 表單轉換為ngForm

<form #f="ngForm" (submit)="onSubmit(f)"></form>

3)、聲明表單欄位為ngModel

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel />
  <button>提交</button>
</form>

4)、取得表單欄位值

import { NgForm } from "@angular/forms"

export class AppComponent {
  onSubmit(form: NgForm) {
    console.log(form.value) // {username: &#39;&#39;}
  }
}

5)、表單分組

<form #f="ngForm" (submit)="onSubmit(f)">
  <div ngModelGroup="user">
    <input type="text" name="username" ngModel />
  </div>
  <div ngModelGroup="contact">
    <input type="text" name="phone" ngModel />
  </div>
  <button>提交</button>
</form>
import { NgForm } from "@angular/forms"

export class AppComponent {
 onSubmit(form: NgForm) {
   console.log(form.value) // {contact: {phone: &#39;&#39;}, user:{username: &#39;&#39;}}
 }
}

#1.3 表單驗證

    required 必填欄位
  • minlength 欄位最小長度
  • maxlength 欄位最大長度
  • pattern 驗證正規例如:pattern=“\d” 符合一個數值
  • <form #f="ngForm" (submit)="onSubmit(f)">
      <input type="text" name="username" ngModel required pattern="\d" />
      <button>提交</button>
    </form>
    export class AppComponent {
      onSubmit(form: NgForm) {
        // 查看表单整体是否验证通过
        console.log(form.valid)
      }
    }
    <!-- 表单整体未通过验证时禁用提交表单 -->
    <button type="submit" [disabled]="f.invalid">提交</button>
在元件範本中顯示表單項目未通過時的錯誤訊息。

<form #f="ngForm" (submit)="onSubmit(f)">
  <input #username="ngModel" />
  <div *ngIf="username.touched && !username.valid && username.errors">
    <div *ngIf="username.errors.required">请填写用户名</div>
    <div *ngIf="username.errors.pattern">不符合正则规则</div>
  </div>
</form>

指定表單項目未通過驗證時的樣式。

input.ng-touched.ng-invalid {
  border: 2px solid red;
}

二、模型驅動

#2.1 概述

表單的

控制邏輯寫在元件類別中,對驗證邏輯擁有更多的控制權,適合複雜的表單的類型。

在模型驅動表單中,表單欄位需要是

FormControl類別的實例,實例物件可以驗證表單欄位中的值,值是否被修改過等等

angular學習之聊兩種類型的表單 一組表單欄位構成整個表單,整個表單需要是
FormGroup 類別的實例,它可以對表單進行整體驗證。

angular學習之聊兩種類型的表單

  • FormControl:表單群組中的一個表單項目

  • FormGroup:表單群組,表單至少是一個FormGroup

  • FormArray:用於複雜表單,可以動態新增表單項目或表單組,在表單驗證時,FormArray 中有一項沒通過,整體沒通過。

2.2 快速上手

1)、介紹ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

2)、在元件類別中建立FormGroup 表單控制物件

import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl()
  })
}

3)、關聯元件範本中的表單

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>

4)、取得表單值

export class AppComponent {
  onSubmit() {
    console.log(this.contactForm.value)
  }
}

5)、設定表單預設值

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值"),
  phone: new FormControl(15888888888)
})

6)、表單分組

contactForm: FormGroup = new FormGroup({
  fullName: new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  }),
  phone: new FormControl()
})
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formGroupName="fullName">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </div>
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>
onSubmit() {
  console.log(this.contactForm.value.name.username)
  console.log(this.contactForm.get(["name", "username"])?.value)
}

#2.3 FormArray

需求:在頁面中預設顯示一組聯絡方式,透過點擊按鈕可以新增更多聯絡方式群組。

import { Component, OnInit } from "@angular/core"
import { FormArray, FormControl, FormGroup } from "@angular/forms"
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent implements OnInit {
  // 表单
  contactForm: FormGroup = new FormGroup({
    contacts: new FormArray([])
  })

  get contacts() {
    return this.contactForm.get("contacts") as FormArray
  }

  // 添加联系方式
  addContact() {
    // 联系方式
    const myContact: FormGroup = new FormGroup({
      name: new FormControl(),
      address: new FormControl(),
      phone: new FormControl()
    })
    // 向联系方式数组中添加联系方式
    this.contacts.push(myContact)
  }

  // 删除联系方式
  removeContact(i: number) {
    this.contacts.removeAt(i)
  }

  ngOnInit() {
    // 添加默认的联系方式
    this.addContact()
  }

  onSubmit() {
    console.log(this.contactForm.value)
  }
}
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formArrayName="contacts">
    <div
      *ngFor="let contact of contacts.controls; let i = index"
      [formGroupName]="i"
    >
      <input type="text" formControlName="name" />
      <input type="text" formControlName="address" />
      <input type="text" formControlName="phone" />
      <button (click)="removeContact(i)">删除联系方式</button>
    </div>
  </div>
  <button (click)="addContact()">添加联系方式</button>
  <button>提交</button>
</form>

2.4 內建表單驗證器

1)、使用內建驗證器提供的驗證規則驗證表單欄位

import { FormControl, FormGroup, Validators } from "@angular/forms"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值", [
    Validators.required,
    Validators.minLength(2)
  ])
})

2)、取得整體表單是否驗證通過

onSubmit() {
  console.log(this.contactForm.valid)
}
<!-- 表单整体未验证通过时禁用表单按钮 -->
<button [disabled]="contactForm.invalid">提交</button>

3)、在元件範本中顯示為驗證通過時的錯誤訊息

get name() {
  return this.contactForm.get("name")!
}
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <div *ngIf="name.touched && name.invalid && name.errors">
    <div *ngIf="name.errors.required">请填写姓名</div>
    <div *ngIf="name.errors.maxlength">
      姓名长度不能大于
      {{ name.errors.maxlength.requiredLength }} 实际填写长度为
      {{ name.errors.maxlength.actualLength }}
    </div>
  </div>
</form>

2.5 自訂同步表單驗證器

  • 自訂驗證器的型別是TypeScript 類別

  • 類別中包含具體的驗證方法,驗證方法必須為靜態方法

  • 驗證方法有一個參數control,類型為AbstractControl。其實就是FormControl 類別的實例物件的型別

  • 如果驗證成功,回傳null

  • 如果驗證失敗,回傳對象,物件中的屬性即為驗證標識,值為true,標識該項驗證失敗

  • 驗證方法的回傳值為ValidationErrors | null

  • import { AbstractControl, ValidationErrors } from "@angular/forms"
    
    export class NameValidators {
      // 字段值中不能包含空格
      static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
        // 验证未通过
        if (/\s/.test(control.value)) return { cannotContainSpace: true }
        // 验证通过
        return null
      }
    }
    import { NameValidators } from "./Name.validators"
    
    contactForm: FormGroup = new FormGroup({
      name: new FormControl("", [
        Validators.required,
        NameValidators.cannotContainSpace
      ])
    })
    <div *ngIf="name.touched && name.invalid && name.errors">
    	<div *ngIf="name.errors.cannotContainSpace">姓名中不能包含空格</div>
    </div>

2.6 自訂非同步表單驗證器

import { AbstractControl, ValidationErrors } from "@angular/forms"
import { Observable } from "rxjs"

export class NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    return new Promise(resolve => {
      if (control.value == "admin") {
         resolve({ shouldBeUnique: true })
       } else {
         resolve(null)
       }
    })
  }
}
contactForm: FormGroup = new FormGroup({
    name: new FormControl(
      "",
      [
        Validators.required
      ],
      NameValidators.shouldBeUnique
    )
  })
<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.shouldBeUnique">用户名重复</div>
</div>
<div *ngIf="name.pending">正在检测姓名是否重复</div>

2.7 FormBuilder

建立表單的

快捷方式。

  • this.fb.control:表單項目

  • this.fb.group:表單群組,表單至少是一個FormGroup

  • this.fb.array:用於複雜表單,可以動態新增表單項目或表單群組,在表單驗證時,FormArray 中有一項沒通過,整體沒通過。

  • import { FormBuilder, FormGroup, Validators } from "@angular/forms"
    
    export class AppComponent {
      contactForm: FormGroup
      constructor(private fb: FormBuilder) {
        this.contactForm = this.fb.group({
          fullName: this.fb.group({
            firstName: ["", [Validators.required]],
            lastName: [""]
          }),
          phone: []
        })
      }
    }

2.8 監聽表單值的變化

实际工作中,我们常常需要根据某个表单值得变化而进行相应的处理,一般可以使用ngModalChange或者表单来实现

2.8.1 ngModalChange

<div>
  <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
</div>
import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  public name = &#39;a&#39;;
  public nameChange() {
  }
}

angular官方并不建议使用ngModalChange。

2.8.2 表单控制

<div [formGroup]="contactForm">
  <input type="text" formControlName="name" />
</div>
import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl()
  })
	
	ngOnInt() {
		this.contactForm.get("name").valueChanges.subscribe(data => {
			console.log(data);
		}
	}
}

2.9 练习

1)、获取一组复选框中选中的值

<form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="let item of Data">
    <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
    {{ item.name }}
  </label>
  <button>提交</button>
</form>
import { Component } from "@angular/core"
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
interface Data {
  name: string
  value: string
}
@Component({
  selector: "app-checkbox",
  templateUrl: "./checkbox.component.html",
  styles: []
})
export class CheckboxComponent {
  Data: Array<Data> = [
    { name: "Pear", value: "pear" },
    { name: "Plum", value: "plum" },
    { name: "Kiwi", value: "kiwi" },
    { name: "Apple", value: "apple" },
    { name: "Lime", value: "lime" }
  ]
  form: FormGroup

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([])
    })
  }

  onChange(event: Event) {
    const target = event.target as HTMLInputElement
    const checked = target.checked
    const value = target.value
    const checkArray = this.form.get("checkArray") as FormArray

    if (checked) {
      checkArray.push(this.fb.control(value))
    } else {
      const index = checkArray.controls.findIndex(
        control => control.value === value
      )
      checkArray.removeAt(index)
    }
  }

  onSubmit() {
    console.log(this.form.value)
  }
}

2)、获取单选框中选中的值

export class AppComponent {
  form: FormGroup

  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({ gender: "" })
  }

  onSubmit() {
    console.log(this.form.value)
  }
}
<form [formGroup]="form" (submit)="onSubmit()">
  <input type="radio" value="male" formControlName="gender" /> Male
  <input type="radio" value="female" formControlName="gender" /> Female
  <button type="submit">Submit</button>
</form>

2.10 其他

  • patchValue:设置表单控件的值(可以设置全部,也可以设置其中某一个,其他不受影响)

  • setValue:设置表单控件的值 (设置全部,不能排除任何一个)

  • valueChanges:当表单控件的值发生变化时被触发的事件

  • reset:表单内容置空

更多编程相关知识,请访问:编程视频!!

以上是angular學習之聊兩種類型的表單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:csdn。如有侵權,請聯絡admin@php.cn刪除
JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版