美图齐众专注资阳网站设计资阳网站制作资阳网站建设

资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

angular的两种类型表单是什么

这篇“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类的实例，实例对象可以验证表单字段中的值，值是否被修改过等等

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

angular的两种类型表单是什么

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")!
}


  
  
    请填写姓名
    
      姓名长度不能大于
      {{ name.errors.maxlength.requiredLength }} 实际填写长度为
      {{ name.errors.maxlength.actualLength }}

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）、获取一组复选框中选中的值


  
    
    {{ item.name }}

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)
  }
}


   Male
   Female
  Submit

2.10 其他

patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响）
setValue：设置表单控件的值 (设置全部，不能排除任何一个)
valueChanges：当表单控件的值发生变化时被触发的事件
reset：表单内容置空

以上就是关于“angular的两种类型表单是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

分享名称：angular的两种类型表单是什么
文章分享：http://www.zsjierui.cn/article/jehhpo.html

网站建设知识

angular的两种类型表单是什么

一、模板驱动

二、模型驱动

其他资讯