广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章带大家了解一下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建站博客其它相关文章!
发表评论