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

本篇文章带大家了解一下angular中的表单，了解一下两种类型的表单：模板驱动和模型驱动，希望对大家有所帮助！

在 Angular 中，表单有两种类型，分别为模板驱动和模型驱动。【相关教程推荐：《angular教程》】

一、模板驱动

1.1 概述

表单的控制逻辑写在组件模板中，适合简单的表单类型。

1.2 快速上手

1）、引入依赖模块 FormsModule

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

登录后复制

2）、将 DOM 表单转换为 ngForm

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

3）、声明表单字段为 ngModel

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

4）、获取表单字段值

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) // {contact: {phone: ''}, user:{username: ''}} }}

登录后复制

1.3 表单验证

required 必填字段minlength 字段最小长度maxlength 字段最大长度pattern 验证正则 例如：pattern=“d” 匹配一个数值

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

export class AppComponent {  onSubmit(form: NgForm) {    // 查看表单整体是否验证通过    console.log(form.valid)  }}

登录后复制

提交

登录后复制

在组件模板中显示表单项未通过时的错误信息。

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

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

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

登录后复制

二、模型驱动

2.1 概述

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

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

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

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

FormGroup：表单组，表单至少是一个 FormGroup

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

2.2 快速上手

1）、引入 ReactiveFormsModule

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

登录后复制

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

import { FormControl, FormGroup } from "@angular/forms"export class AppComponent {  contactForm: FormGroup = new FormGroup({    name: new FormControl(),    phone: new FormControl()  })}

登录后复制

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

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

4）、获取表单值

export class AppComponent {  onSubmit() {    console.log(this.contactForm.value)  }}

登录后复制

5）、设置表单默认值

contactForm: FormGroup = new FormGroup({  name: new FormControl("默认值"),  phone: new FormControl(15888888888)})

登录后复制

6）、表单分组

contactForm: FormGroup = new FormGroup({  fullName: new FormGroup({    firstName: new FormControl(),    lastName: new FormControl()  }),  phone: new FormControl()})

登录后复制

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

onSubmit() {  console.log(this.contactForm.value.name.username)  console.log(this.contactForm.get(["name", "username"])?.value)}

登录后复制

2.3 FormArray

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

import { Component, OnInit } from "@angular/core"import { FormArray, FormControl, FormGroup } from "@angular/forms"@Component({  selector: "app-root",  templateUrl: "./app.component.html",  styles: []})export class AppComponent implements OnInit {  // 表单  contactForm: FormGroup = new FormGroup({    contacts: new FormArray([])  })  get contacts() {    return this.contactForm.get("contacts") as FormArray  }  // 添加联系方式  addContact() {    // 联系方式    const myContact: FormGroup = new FormGroup({      name: new FormControl(),      address: new FormControl(),      phone: new FormControl()    })    // 向联系方式数组中添加联系方式    this.contacts.push(myContact)  }  // 删除联系方式  removeContact(i: number) {    this.contacts.removeAt(i)  }  ngOnInit() {    // 添加默认的联系方式    this.addContact()  }  onSubmit() {    console.log(this.contactForm.value)  }}

登录后复制

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

2.4 内置表单验证器

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

import { FormControl, FormGroup, Validators } from "@angular/forms"contactForm: FormGroup = new FormGroup({  name: new FormControl("默认值", [    Validators.required,    Validators.minLength(2)  ])})

登录后复制

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

onSubmit() {  console.log(this.contactForm.valid)}

登录后复制

提交

登录后复制

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

get name() {  return this.contactForm.get("name")!}

登录后复制

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

2.5 自定义同步表单验证器

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

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

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

如果验证成功，返回 null

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

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

import { AbstractControl, ValidationErrors } from "@angular/forms"export class NameValidators {  // 字段值中不能包含空格  static cannotContainSpace(control: AbstractControl): ValidationErrors | null {    // 验证未通过    if (/s/.test(control.value)) return { cannotContainSpace: true }    // 验证通过    return null  }}

登录后复制

import { NameValidators } from "./Name.validators"contactForm: FormGroup = new FormGroup({  name: new FormControl("", [    Validators.required,    NameValidators.cannotContainSpace  ])})

登录后复制

姓名中不能包含空格

登录后复制

2.6 自定义异步表单验证器

import { AbstractControl, ValidationErrors } from "@angular/forms"import { Observable } from "rxjs"export class NameValidators {  static shouldBeUnique(control: AbstractControl): Promise {    return new Promise(resolve => {      if (control.value == "admin") {         resolve({ shouldBeUnique: true })       } else {         resolve(null)       }    })  }}

登录后复制

contactForm: FormGroup = new FormGroup({    name: new FormControl(      "",      [        Validators.required      ],      NameValidators.shouldBeUnique    )  })

登录后复制

  
用户名重复
正在检测姓名是否重复

登录后复制

2.7 FormBuilder

创建表单的快捷方式。

this.fb.control：表单项

this.fb.group：表单组，表单至少是一个 FormGroup

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

import { FormBuilder, FormGroup, Validators } from "@angular/forms"export class AppComponent {  contactForm: FormGroup  constructor(private fb: FormBuilder) {    this.contactForm = this.fb.group({      fullName: this.fb.group({        firstName: ["", [Validators.required]],        lastName: [""]      }),      phone: []    })  }}

登录后复制

2.8 监听表单值的变化

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

2.8.1 ngModalChange

登录后复制登录后复制

import { FormControl, FormGroup } from "@angular/forms"export class AppComponent {  public name = 'a';  public nameChange() {  }}

登录后复制

angular官方并不建议使用ngModalChange。

2.8.2 表单控制

登录后复制登录后复制

import { FormControl, FormGroup } from "@angular/forms"export class AppComponent {  contactForm: FormGroup = new FormGroup({    name: new FormControl()  })ngOnInt() {this.contactForm.get("name").valueChanges.subscribe(data => {console.log(data);}}}

登录后复制

2.9 练习

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

登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

import { Component } from "@angular/core"import { FormArray, FormBuilder, FormGroup } from "@angular/forms"interface Data {  name: string  value: string}@Component({  selector: "app-checkbox",  templateUrl: "./checkbox.component.html",  styles: []})export class CheckboxComponent {  Data: Array = [    { name: "Pear", value: "pear" },    { name: "Plum", value: "plum" },    { name: "Kiwi", value: "kiwi" },    { name: "Apple", value: "apple" },    { name: "Lime", value: "lime" }  ]  form: FormGroup  constructor(private fb: FormBuilder) {    this.form = this.fb.group({      checkArray: this.fb.array([])    })  }  onChange(event: Event) {    const target = event.target as HTMLInputElement    const checked = target.checked    const value = target.value    const checkArray = this.form.get("checkArray") as FormArray    if (checked) {      checkArray.push(this.fb.control(value))    } else {      const index = checkArray.controls.findIndex(        control => control.value === value      )      checkArray.removeAt(index)    }  }  onSubmit() {    console.log(this.form.value)  }}

登录后复制

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

export class AppComponent {  form: FormGroup  constructor(public fb: FormBuilder) {    this.form = this.fb.group({ gender: "" })  }  onSubmit() {    console.log(this.form.value)  }}

登录后复制

登录后复制

2.10 其他

patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响）

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

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

reset：表单内容置空

更多编程相关知识，请访问：编程视频！！

以上就是angular学习之聊聊两种类型的表单的详细内容，更多请关注【创想鸟】其它相关文章！