Une brève analyse de deux types de formulaires Form dans Angular

Cet article vous fera découvrir les deux formulaires Form dans Angular et présentera brièvement leur utilisation. J'espère qu'il sera utile à tout le monde !

Dans Angular, il existe deux types de formulaires, à savoir basés sur un modèle et basés sur un modèle. [Recommandations de didacticiel associées : "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 类的实例，实例对象可以验证表单字段中的值，值是否被修改过等等

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

• 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：用于复杂表单，可以动态添加表单项或表单组，在表单验证时，FormArrayTutoriel angulaire

  "]

1. Pilote de modèle

1.1 Présentation

Contrôler l'écriture de la logique pour les formulaires Dans le modèle de composant, il convient aux types de formulaires simples

1.2 Démarrez rapidement🎜🎜🎜Introduisez le module dépendant 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>

🎜Convertissez le formulaire DOM en < code>ngForm< /code>🎜

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

🎜Déclarez le champ du formulaire comme ngModel🎜

export class AppComponent {
  form: FormGroup

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

  onSubmit() {
    console.log(this.form.value)
  }
}

🎜Obtenez la valeur du champ du formulaire🎜

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

🎜Regroupement de formulaires🎜

validateForm: FormGroup; 

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

🎜🎜1.3 Validation du formulaire🎜🎜

• obligatoire Champ obligatoire🎜
• minlength Longueur minimale du champ🎜
• maxlength Longueur maximale du champ🎜
• pattern Régularité de vérification Par exemple : pattern="d" correspond à une valeur numérique🎜🎜rrreeerrreeerrreee🎜Affiche le message d'erreur lorsque l'élément de formulaire échoue dans le modèle de composant🎜rrreee🎜Spécifie le style lorsque l'élément de formulaire échoue à la validation🎜rrreee🎜🎜 2. Piloté par un modèle🎜🎜🎜🎜2.1 Présentation🎜🎜🎜La logique de contrôle du formulaire est écrite dans le composant. classe, qui vous donne plus de contrôle sur la logique de vérification. Un type adapté aux formulaires complexes. 🎜🎜Dans un formulaire basé sur un modèle, le champ du formulaire doit être une instance de la classe FormControl. L'objet instance peut vérifier la valeur dans le champ du formulaire, si la valeur a été modifiée, etc. 🎜🎜🎜🎜A un ensemble de champs de formulaire constitue le formulaire entier, le formulaire entier doit être une instance de la classe FormGroup, qui peut effectuer une validation globale sur le formulaire🎜🎜🎜
  • 🎜FormControl : dans le groupe de formulaires Un élément de formulaire 🎜🎜
  • 🎜FormGroup : groupe de formulaires, le formulaire est au moins un FormGroup</ code>🎜🎜<li>🎜<code>FormArray : utilisé Pour les formulaires complexes, vous pouvez ajouter dynamiquement des éléments de formulaire ou des groupes de formulaires. Lors de la vérification du formulaire, un élément de FormArray a échoué et le. tout a échoué 🎜🎜🎜🎜🎜2.2 Commencez rapidement🎜🎜🎜Introduction du ReactiveFormsModule🎜rrreee🎜Créez un objet de contrôle de formulaire FormGroup dans la classe de composant🎜rrreee🎜Associez le formulaire dans le modèle de composant🎜rrreee🎜Obtenir la valeur du formulaire🎜rrreee🎜Définir la valeur par défaut du formulaire🎜rrreee🎜Groupement de formulaires🎜rrreeerrreeerrreee🎜🎜2.3 FormArray🎜🎜🎜Exigences : un groupe d'informations de contact est affiché sur la page par défaut, et d'autres groupes d'informations de contact peuvent être ajoutés en cliquant sur le bouton🎜rrreeerrreee🎜🎜2.4 Validateur de formulaire intégré🎜🎜 🎜Utilisez les règles de validation fournies par le validateur intégré pour valider les champs du formulaire🎜rrreee🎜Obtenir si le formulaire global est vérifié ou non🎜rrreeerrreee🎜Afficher dans le modèle de composant comme message d'erreur lorsque la vérification est réussie🎜rrreeerrreee🎜🎜2.5 Validateur de formulaire synchronisé personnalisé🎜🎜< ul style="list-style-type: disc;" >
  • 🎜Le type de validateur personnalisé est la classe TypeScript🎜🎜
  • 🎜La classe contient des méthodes de vérification spécifiques, les méthodes de vérification doivent être une méthode statique 🎜🎜
  • 🎜La méthode de vérification a un paramètre control de type AbstractControl. En fait, c'est le type d'objet instance de la classe FormControl🎜🎜
  • 🎜Si la vérification est réussie, retournez null🎜🎜
  • 🎜Si le la vérification échoue, renvoie l'objet, dans l'objet L'attribut de est l'identifiant de vérification et la valeur est true, indiquant que la vérification a échoué🎜🎜
  • 🎜La valeur de retour de la méthode de vérification est ValidationErrors | null🎜🎜🎜rrreeerrreeerrreee🎜 🎜2.6 Validateur de formulaire asynchrone personnalisé🎜🎜rrreeerrreeerrreee🎜🎜2.7 FormBuilder🎜🎜🎜Un raccourci pour créer un formulaire. 🎜
    • 🎜this.fb.control : élément de formulaire 🎜🎜
    • 🎜this.fb.group< /code> : Groupe de formulaires, le formulaire est au moins un <code>FormGroup🎜🎜
    • 🎜this.fb.array : Utilisé pour les formulaires complexes, vous pouvez ajouter dynamiquement un formulaire éléments ou formulaires Groupe, lors de la validation du formulaire, un élément dans FormArray a échoué, et l'ensemble a échoué 🎜🎜🎜🎜🎜🎜🎜🎜2.8 Exercice 🎜🎜🎜Obtenir la valeur sélectionnée dans un groupe de cases à cocher🎜 rrreeerrreee🎜 Obtenez la valeur sélectionnée dans le bouton radio🎜

      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();

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

      Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!