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

表单的控制逻辑写在组件类中，对验证逻辑拥有