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: ''}   } }

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 表單驗證

• 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 概述

表單的控制邏輯寫在組件類中，對驗證邏輯擁有