>웹 프론트엔드 >JS 튜토리얼 >Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석

Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석

青灯夜游
青灯夜游앞으로
2021-09-23 10:26:592706검색

이 글에서는 Angular의 두 가지 Form 양식을 살펴보고 그 사용법을 간략하게 소개하겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석

Angular에는 템플릿 기반과 모델 기반이라는 두 가지 유형의 양식이 있습니다. [관련 튜토리얼 권장사항: "Angular 中,表单有两种类型,分别为模板驱动和模型驱动。【相关教程推荐:《angular教程》】

1.  模板驱动

1.1  概述

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

1.2  快速上手

引入依赖模块 FormsModule

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

DOM 表单转换为 ngForm

<form #f="ngForm" (submit)="onSubmit(f)"></form>

声明表单字段为 ngModel

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel />
  <button>提交</button>
</form>

获取表单字段值

import { NgForm } from "@angular/forms"

export class AppComponent {
  onSubmit(form: NgForm) {
    console.log(form.value)
  }
}

表单分组

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

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.  模型驱动

2.1  概述

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

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

Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석

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

Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석

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

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

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

2.2  快速上手

引入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

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

import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl()
  })
}

关联组件模板中的表单

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>

获取表单值

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

设置表单默认值

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

表单分组

contactForm: FormGroup = new FormGroup({
  fullName: new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  }),
  phone: new FormControl()
})
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formGroupName="fullName">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </div>
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>
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)
  }
}
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formArrayName="contacts">
    <div
      *ngFor="let contact of contacts.controls; let i = index"
      [formGroupName]="i"
    >
      <input type="text" formControlName="name" />
      <input type="text" formControlName="address" />
      <input type="text" formControlName="phone" />
      <button (click)="removeContact(i)">删除联系方式</button>
    </div>
  </div>
  <button (click)="addContact()">添加联系方式</button>
  <button>提交</button>
</form>

2.4  内置表单验证器

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

import { FormControl, FormGroup, Validators } from "@angular/forms"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值", [
    Validators.required,
    Validators.minLength(2)
  ])
})

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

onSubmit() {
  console.log(this.contactForm.valid)
}
<!-- 表单整体未验证通过时禁用表单按钮 -->
<button [disabled]="contactForm.invalid">提交</button>

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

get name() {
  return this.contactForm.get("name")!
}
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <div *ngIf="name.touched && name.invalid && name.errors">
    <div *ngIf="name.errors.required">请填写姓名</div>
    <div *ngIf="name.errors.maxlength">
      姓名长度不能大于
      {{ name.errors.maxlength.requiredLength }} 实际填写长度为
      {{ name.errors.maxlength.actualLength }}
    </div>
  </div>
</form>

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
  ])
})
<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.cannotContainSpace">姓名中不能包含空格</div>
</div>

2.6  自定义异步表单验证器

import { AbstractControl, ValidationErrors } from "@angular/forms"

export class NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    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
    )
 })
<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.shouldBeUnique">用户名重复</div>
</div>
<div *ngIf="name.pending">正在检测姓名是否重复</div>

2.7  FormBuilder

创建表单的快捷方式。

  • this.fb.control:表单项

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

  • this.fb.array:用于复杂表单,可以动态添加表单项或表单组,在表单验证时,FormArrayangular tutorial

    "]

1. 템플릿 드라이버Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석

1.1 개요

폼 제어 로직 작성 컴포넌트 템플릿에서는 간단한 양식 유형에 적합합니다

1.2 빠르게 시작하세요🎜🎜🎜종속 모듈 FormsModule 도입🎜
<form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="let item of Data">
    <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
    {{ item.name }}
  </label>
  <button>提交</button>
</form>
🎜DOM 형식을 DOM 형식으로 변환합니다. code>ngForm🎜
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<Data> = [
    { 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)
  }
}
🎜양식 필드를 ngModel🎜
export class AppComponent {
  form: FormGroup

  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({ gender: "" })
  }

  onSubmit() {
    console.log(this.form.value)
  }
}
🎜로 선언합니다. 양식 필드 값 가져오기🎜
<form [formGroup]="form" (submit)="onSubmit()">
  <input type="radio" value="male" formControlName="gender" /> Male
  <input type="radio" value="female" formControlName="gender" /> Female
  <button type="submit">Submit</button>
</form>
🎜양식 그룹화🎜
validateForm: FormGroup; 

this.validateForm.get('cpwd').updateValueAndValidity();
🎜🎜1.3 양식 유효성 검사🎜🎜
  • 필수 필수 필드🎜
  • minlength 필드 최소 길이🎜
  • maxlength 필드 최대 길이🎜
  • 패턴 확인 규칙성 예: pattern="d"는 숫자 값과 일치합니다🎜🎜rrreeerrreeerrreee🎜구성 요소 템플릿에서 양식 항목이 실패할 때 오류 메시지를 표시합니다.🎜rrreee🎜 양식 항목이 유효성 검사에 실패했습니다🎜rrreee🎜🎜 2. 모델 기반🎜🎜🎜🎜2.1 개요🎜🎜🎜양식의 제어 논리가 구성 요소에 작성되었습니다. 복잡한 양식에 적합한 유형입니다. 🎜🎜모델 기반 양식에서 양식 필드는 FormControl 클래스의 인스턴스여야 합니다. 인스턴스 개체는 양식 필드의 값, 값이 수정되었는지 등을 확인할 수 있습니다. 🎜🎜Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석🎜🎜A 양식 필드 집합은 전체 양식을 구성하며 전체 양식은 양식에 대한 전반적인 유효성 검사를 수행할 수 있는 FormGroup 클래스의 인스턴스여야 합니다🎜🎜Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석🎜
    • 🎜FormControl: 양식 그룹 A 양식 항목 🎜🎜
    • 🎜FormGroup: 양식 그룹, 양식은 하나 이상의 FormGroup code>🎜🎜<li>🎜<code>FormArray: 사용됨 복잡한 양식의 경우 양식 항목 또는 양식 그룹을 동적으로 추가할 수 있습니다. 양식 확인 중에 FormArray의 한 항목이 실패하고 전체 실패 🎜🎜🎜🎜🎜2.2 빨리 시작하기🎜🎜🎜 ReactiveFormsModule 소개🎜rrreee🎜컴포넌트 클래스에 FormGroup 양식 제어 개체 만들기🎜rrreee🎜양식 연결 구성 요소 템플릿에서🎜rrreee🎜양식 값 가져오기🎜rrreee🎜양식 기본값 설정🎜rrreee🎜양식 그룹화🎜rrreeerrreeerrreee🎜🎜2.3 FormArray🎜🎜🎜요구 사항: 연락처 정보 그룹이 표시됩니다. 기본적으로 페이지가 표시되며 버튼을 클릭하면 더 많은 연락처 정보 그룹을 추가할 수 있습니다🎜rrreeerrreee🎜🎜2.4 내장된 양식 유효성 검사기🎜🎜 🎜내장된 유효성 검사기가 제공하는 유효성 검사 규칙을 사용하여 양식 필드의 유효성을 검사합니다🎜rrreee🎜Get 전체 양식이 검증되었는지 여부🎜rrreeerrreee🎜검증이 통과되면 구성 요소 템플릿에 오류 메시지로 표시🎜rrreeerrreee🎜🎜2.5 사용자 정의 동기화 양식 검사기🎜🎜
    • 🎜사용자 정의 유효성 검사기의 유형은 TypeScript 클래스입니다🎜🎜
    • 🎜클래스에는 특정 확인 방법이 포함되어 있습니다. 확인 방법은 정적 방법이어야 합니다 🎜🎜
    • 🎜확인 방법 AbstractControl 유형의 control 매개변수가 있습니다. 실제로 FormControl 클래스의 인스턴스 객체 유형입니다🎜🎜
    • 🎜검증에 성공하면 null을 반환🎜🎜
    • 🎜 검증에 실패하면 객체를 반환합니다. 객체에서 의 속성은 검증 식별자이고 값은 true로 검증에 실패했음을 나타냅니다.🎜🎜
    • 🎜검증 방법의 반환 값은 다음과 같습니다. ValidationErrors | null🎜🎜🎜rrreeerrreeerrreee🎜 🎜2.6 사용자 정의 비동기 양식 유효성 검사기🎜🎜rrreeerrreeerrreee🎜🎜2.7 FormBuilder🎜🎜🎜양식을 만드는 단축키입니다. 🎜
      • 🎜this.fb.control: 양식 항목 🎜🎜
      • 🎜this.fb.group: 양식 그룹, 양식은 하나 이상의 <code>FormGroup🎜🎜
      • 🎜this.fb.array: 복잡한 양식에 사용되며 동적으로 양식을 추가할 수 있습니다. 항목 또는 양식 그룹, 양식 유효성 검사 중에 FormArray의 한 항목이 실패하고 전체가 실패했습니다. 🎜🎜🎜🎜🎜🎜🎜🎜2.8 연습 🎜🎜🎜선택한 값을 일련의 확인란에서 가져오기🎜 rrreeerrreee🎜 라디오 버튼에서 선택한 값을 가져옵니다🎜
        export class AppComponent {
          form: FormGroup
        
          constructor(public fb: FormBuilder) {
            this.form = this.fb.group({ gender: "" })
          }
        
          onSubmit() {
            console.log(this.form.value)
          }
        }
        <form [formGroup]="form" (submit)="onSubmit()">
          <input type="radio" value="male" formControlName="gender" /> Male
          <input type="radio" value="female" formControlName="gender" /> Female
          <button type="submit">Submit</button>
        </form>

        2.9  其他

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

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

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

        • reset:表单内容置空

        • updateValueAndValidity:对指定输入框 取消校验

        validateForm: FormGroup; 
        
        this.validateForm.get('cpwd').updateValueAndValidity();

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

위 내용은 Angular의 두 가지 유형의 Form 양식에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제