L'apprentissage angulaire parle de deux types de formulaires

Cet article vous amènera à comprendre les formulaires dans angular et à découvrir les deux types de formulaires : basés sur un modèle et basés sur un modèle. J'espère qu'il vous sera utile !

Dans Angular, il existe deux types de formulaires, à savoir piloté par un modèle et piloté par un modèle. [Recommandations du didacticiel associé : "模板驱动和模型驱动。【相关教程推荐：《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>

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

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）、关联组件模板中的表单

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

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

<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 内置表单验证器

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

<!-- 表单整体未验证通过时禁用表单按钮 -->
<button [disabled]="contactForm.invalid">提交</button>

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

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"
import { Observable } from "rxjs"

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.arrayTutoriel angulaire

  "]

1. Pilote de modèle

1.1 Présentation

🎜🎜La logique de contrôle du formulaire est écrite dans Modèle de composant convient aux types de formulaires simples. 🎜🎜🎜🎜1.2 Commencez rapidement🎜🎜🎜🎜1), introduisez le module dépendant FormsModule🎜

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), convertissez le formulaire DOM en ngForm🎜

<div>
  <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
</div>

🎜3), déclarez les champs du formulaire comme ngModel🎜

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

export class AppComponent {
  public name = 'a';
  public nameChange() {
  }
}

🎜4), obtenez les champs du formulaire Value🎜

<div [formGroup]="contactForm">
  <input type="text" formControlName="name" />
</div>

🎜5), regroupement de formulaires🎜

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

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

🎜🎜🎜1.3 Validation du formulaire🎜🎜🎜

• obligatoire champ obligatoire🎜
• minlength longueur minimale du champ🎜
• maxlength longueur maximale du champ🎜
• modèle Exemple régulier de validation : pattern="d" correspond à une valeur numérique 🎜🎜

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

  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>

  🎜 affiche le message d'erreur lorsque l'élément de formulaire échoue dans le modèle de composant. 🎜rrreee🎜Spécifiez 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 class , a plus de contrôle sur la logique de validation et convient aux types de 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 le la valeur a été modifiée, etc. 🎜🎜
  Un ensemble de champs de formulaire Le formulaire entier doit être une instance de la classe FormGroup, qui peut effectuer une validation entière sur le formulaire. 🎜🎜🎜
  • 🎜FormControl : un élément de formulaire dans le groupe de formulaires🎜🎜
  • 🎜FormGroup : groupe de formulaires, le formulaire est au moins un FormGroup🎜🎜
  • 🎜FormArray : utilisé pour formulaires complexes, vous pouvez ajouter dynamiquement des éléments de formulaire ou des groupes de formulaires. Lors de la validation du formulaire, un élément du FormArray échoue et l'ensemble échoue. 🎜🎜🎜🎜🎜🎜2.2 Commencez rapidement🎜🎜🎜🎜1), introduisez ReactiveFormsModule🎜rrreee🎜2), créez un objet de contrôle de formulaire FormGroup dans la classe du composant🎜rrreee🎜3), associez le formulaire dans le modèle de composant🎜rrreee 🎜4) , Obtenir la valeur du formulaire🎜rrreee🎜5), Définir la valeur par défaut du formulaire🎜rrreee🎜6), Regroupement de formulaires🎜rrreeerrreeerrreee🎜🎜🎜2.3 FormArray🎜🎜🎜🎜Exigences : Un ensemble d'informations de contact est affiché par défaut sur la page , et vous pouvez l'ajouter en cliquant sur le bouton Plus de groupes de contacts. 🎜rrreeerrreee🎜🎜🎜2.4 Validateur de formulaire intégré🎜🎜🎜🎜1), utilisez les règles de validation fournies par le validateur intégré pour vérifier les champs du formulaire🎜rrreee🎜2), obtenez si le formulaire global est vérifié ou non🎜 rrreeerrreee🎜3), dans le modèle de composant Affiché sous forme de message d'erreur lorsque la vérification réussit🎜rrreeerrreee🎜🎜🎜2.5 Validateur de formulaire synchronisé personnalisé🎜🎜🎜
    • 🎜Le le type de validateur personnalisé est la classe TypeScript 🎜🎜
    • 🎜La classe contient des méthodes de vérification spécifiques, qui doivent être des méthodes statiques🎜🎜
    • 🎜La méthode de vérification a un contrôle de paramètre, le type est AbstractControl. En fait, c'est le type d'objet instance de la classe FormControl🎜🎜
    • 🎜Si la vérification réussit, null est renvoyé🎜🎜
    • 🎜Si la vérification échoue, l'objet est renvoyé L'attribut dans l'objet. est l'identification de vérification, et la valeur est vraie, qui identifie l'élément. La validation a échoué🎜🎜
    • 🎜La valeur de retour de la méthode de validation est ValidationErrors | null🎜🎜🎜rrreeerrreeerrreee🎜🎜🎜2.6 Validateur de formulaire asynchrone personnalisé🎜🎜🎜 rrreeerrreeerrreee🎜🎜🎜2.7 FormBuilder🎜🎜 🎜🎜Créer un formulaire de manière rapide. 🎜
      • 🎜this.fb.control : élément de formulaire 🎜🎜
      • 🎜this.fb.group< /code> : Groupe de formulaires, le formulaire est au moins un FormGroup🎜🎜<li>🎜<code>this.fb.array : Utilisé pour les formulaires complexes, vous pouvez ajouter dynamiquement des éléments de formulaire ou des groupes de formulaires, pendant le formulaire validation, un élément de FormArray a échoué et le tout a échoué. 🎜🎜🎜rrreee🎜🎜🎜2.8 Surveiller les modifications des valeurs du formulaire🎜🎜🎜

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

        2.8.1 ngModalChange

        <div>
          <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
        </div>

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

        angular官方并不建议使用ngModalChange。

        2.8.2 表单控制

        <div [formGroup]="contactForm">
          <input type="text" formControlName="name" />
        </div>

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

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

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

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

        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.10 其他

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

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

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

        • reset：表单内容置空

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

        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!