angular学习之聊聊两种类型的表单

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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>
登录后复制

指定表单项未通过验证时的样式。

<form #f="ngForm" (submit)="onSubmit(f)"></form>0
登录后复制二、模型驱动

2.1 概述

表单的控制逻辑写在组件类中,对验证逻辑拥有更多的控制权,适合复杂的表单的类型。

在模型驱动表单中,表单字段需要是 FormControl类的实例,实例对象可以验证表单字段中的值,值是否被修改过等等

一组表单字段构成整个表单,整个表单需要是 FormGroup 类的实例,它可以对表单进行整体验证。

FormControl:表单组中的一个表单项

FormGroup:表单组,表单至少是一个 FormGroup

FormArray:用于复杂表单,可以动态添加表单项或表单组,在表单验证时,FormArray 中有一项没通过,整体没通过。

2.2 快速上手

1)、引入 ReactiveFormsModule

<form #f="ngForm" (submit)="onSubmit(f)"></form>1
登录后复制

2)、在组件类中创建 FormGroup 表单控制对象

<form #f="ngForm" (submit)="onSubmit(f)"></form>2
登录后复制

3)、关联组件模板中的表单

<form #f="ngForm" (submit)="onSubmit(f)"></form>3
登录后复制

4)、获取表单值

<form #f="ngForm" (submit)="onSubmit(f)"></form>4
登录后复制

5)、设置表单默认值

<form #f="ngForm" (submit)="onSubmit(f)"></form>5
登录后复制

6)、表单分组

<form #f="ngForm" (submit)="onSubmit(f)"></form>6
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)"></form>7
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)"></form>8
登录后复制

2.3 FormArray

需求:在页面中默认显示一组联系方式,通过点击按钮可以添加更多联系方式组。

<form #f="ngForm" (submit)="onSubmit(f)"></form>9
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>0
登录后复制

2.4 内置表单验证器

1)、使用内置验证器提供的验证规则验证表单字段

<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>1
登录后复制

2)、获取整体表单是否验证通过

<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>2
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>3
登录后复制

3)、在组件模板中显示为验证通过时的错误信息

<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>4
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>5
登录后复制

2.5 自定义同步表单验证器

自定义验证器的类型是 TypeScript 类

类中包含具体的验证方法,验证方法必须为静态方法

验证方法有一个参数 control,类型为 AbstractControl。其实就是 FormControl 类的实例对象的类型

如果验证成功,返回 null

如果验证失败,返回对象,对象中的属性即为验证标识,值为 true,标识该项验证失败

验证方法的返回值为 ValidationErrors | null

<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>6
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>7
登录后复制
<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>8
登录后复制

2.6 自定义异步表单验证器

<form #f="ngForm" (submit)="onSubmit(f)">  <input type="text" name="username" ngModel />  <button>提交</button></form>9
登录后复制
import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}0
登录后复制
import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}1
登录后复制

2.7 FormBuilder

创建表单的快捷方式。

this.fb.control:表单项

this.fb.group:表单组,表单至少是一个 FormGroup

this.fb.array:用于复杂表单,可以动态添加表单项或表单组,在表单验证时,FormArray 中有一项没通过,整体没通过。

import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}2
登录后复制

2.8 监听表单值的变化

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

2.8.1 ngModalChange

import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}3
登录后复制
import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}4
登录后复制

angular官方并不建议使用ngModalChange。

2.8.2 表单控制

import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}5
登录后复制
import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}6
登录后复制

2.9 练习

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

import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}7
登录后复制
import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}8
登录后复制

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

import { NgForm } from "@angular/forms"export class AppComponent {  onSubmit(form: NgForm) {    console.log(form.value) // {username: ''}  }}9
登录后复制
<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>0
登录后复制

2.10 其他

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

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

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

reset:表单内容置空

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

以上就是angular学习之聊聊两种类型的表单的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:HTML5文件操作API的代码案例详解
下一篇:Vue文档中的可复用性函数的详解

发表评论

关闭广告
关闭广告