angular學(xué)習(xí)之聊聊兩種類型的表單

本篇文章帶大家了解一下angular中的表單，了解一下兩種類型的表單：模板驅(qū)動(dòng)和模型驅(qū)動(dòng)，希望對(duì)大家有所幫助！

在 Angular 中，表單有兩種類型，分別為模板驅(qū)動(dòng)和模型驅(qū)動(dòng)。【相關(guān)教程推薦：《angular教程》】

一、模板驅(qū)動(dòng)

1.1 概述

表單的控制邏輯寫(xiě)在組件模板中，適合簡(jiǎn)單的表單類型。

1.2 快速上手

1）、引入依賴模塊 FormsModule

import { FormsModule } from "@angular/forms"  @NgModule({   imports: [FormsModule], }) export class AppModule {}

2）、將 DOM 表單轉(zhuǎn)換為 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: ''}   } }

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: ''}, user:{username: ''}}  } }

1.3 表單驗(yàn)證

• required 必填字段
• minlength 字段最小長(zhǎng)度
• maxlength 字段最大長(zhǎng)度
• pattern 驗(yàn)證正則 例如：pattern=“d” 匹配一個(gè)數(shù)值

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

export class AppComponent {   onSubmit(form: NgForm) {     // 查看表單整體是否驗(yàn)證通過(guò)     console.log(form.valid)   } }

<!-- 表單整體未通過(guò)驗(yàn)證時(shí)禁用提交表單 --> <button type="submit" [disabled]="f.invalid">提交</button>

在組件模板中顯示表單項(xiàng)未通過(guò)時(shí)的錯(cuò)誤信息。

<form #f="ngForm" (submit)="onSubmit(f)">   <input #username="ngModel" />   <div *ngIf="username.touched && !username.valid && username.errors">     <div *ngIf="username.errors.required">請(qǐng)?zhí)顚?xiě)用戶名</div>     <div *ngIf="username.errors.pattern">不符合正則規(guī)則</div>   </div> </form>

指定表單項(xiàng)未通過(guò)驗(yàn)證時(shí)的樣式。

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

二、模型驅(qū)動(dòng)

2.1 概述

表單的控制邏輯寫(xiě)在組件類中，對(duì)驗(yàn)證邏輯擁有