搜尋
首頁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刪除
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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