Heim > Artikel > Web-Frontend > Angular Learning spricht von zwei Arten von Formen

Angular Learning spricht von zwei Arten von Formen

青灯夜游nach vorne: 2022-05-20 10:28:552458Durchsuche

Dieser Artikel wird Ihnen helfen, die Formulare in Angular zu verstehen und mehr über die beiden Arten von Formularen zu erfahren: vorlagengesteuert und modellgesteuert. Ich hoffe, er wird Ihnen hilfreich sein!

In Angular gibt es zwei Arten von Formularen, nämlich vorlagengesteuert und modellgesteuert. [Verwandte Tutorial-Empfehlungen: „模板驱动和模型驱动。【相关教程推荐：《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: &#39;&#39;}
  }
}

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: &#39;&#39;}, user:{username: &#39;&#39;}}
 }
}

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

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

Angular Learning spricht von zwei Arten von Formen

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.arrayAngular Tutorial“]

1.1 Übersicht

🎜Die Steuerlogik des Formulars ist geschrieben in Komponentenvorlage eignet sich für einfache Formulartypen. 🎜🎜🎜🎜1.2 Schnell loslegen🎜🎜🎜🎜1), abhängiges Modul 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: []
    })
  }
}

🎜 einführen, DOM-Formular in ngForm konvertieren🎜

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

🎜3), Formularfelder als ngModel deklarieren🎜

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

export class AppComponent {
  public name = &#39;a&#39;;
  public nameChange() {
  }
}

🎜4), Formularfelder abrufen Wert🎜

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

🎜5), Formulargruppierung🎜

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

erforderliches Pflichtfeld🎜
minlength minimale Feldlänge🎜
maxlength maximale Feldlänge🎜
Muster Beispiel für eine reguläre Validierung: Pattern="d" stimmt mit einem numerischen Wert überein. 🎜🎜
```
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>
```
🎜 zeigt die Fehlermeldung an, wenn das Formularelement in der Komponentenvorlage fehlschlägt. 🎜rrreee🎜Geben Sie den Stil an, wenn das Formularelement die Validierung nicht besteht. 🎜rrreee
🎜2. Modellgesteuert🎜

🎜🎜🎜2.1 Übersicht🎜🎜🎜🎜Die Steuerlogik des Formulars ist in der Komponente geschrieben class , hat mehr Kontrolle über die Validierungslogik und eignet sich für komplexe Formulartypen. 🎜🎜In einem modellgesteuerten Formular muss das Formularfeld eine Instanz der Klasse FormControl sein. Das Instanzobjekt kann den Wert im Formularfeld überprüfen Wert wurde geändert usw. 🎜🎜
Eine Reihe von Formularfeldern. Das gesamte Formular muss eine Instanz der FormGroup-Klasse sein, die eine gesamte-Validierung für das Formular durchführen kann. 🎜🎜🎜
- 🎜FormControl: ein Formularelement in der Formulargruppe🎜🎜
- 🎜FormGroup: Formulargruppe, das Formular ist mindestens eine FormGroup🎜🎜
- 🎜FormArray: wird verwendet für Bei komplexen Formularen können Sie Formularelemente oder Formulargruppen dynamisch hinzufügen. Während der Formularvalidierung schlägt ein Element im FormArray fehl und das Ganze schlägt fehl. 🎜🎜🎜🎜🎜🎜2.2 Schnell loslegen🎜🎜🎜🎜1), ReactiveFormsModule einführen🎜rrreee🎜2), ein FormGroup-Formularsteuerobjekt in der Komponentenklasse erstellen🎜rrreee🎜3), das Formular in der Komponentenvorlage zuordnen🎜rrreee 🎜4) Formularwert abrufen🎜rrreee🎜5), Formular-Standardwert festlegen🎜rrreee🎜6), Formulargruppierung🎜rrreeerrreeerrreee🎜🎜🎜2.3 FormArray🎜🎜🎜🎜Anforderungen: Auf der Seite werden standardmäßig eine Reihe von Kontaktinformationen angezeigt , und Sie können es hinzufügen, indem Sie auf die Schaltfläche Weitere Kontaktgruppen klicken. 🎜rrreeerrreee🎜🎜🎜2.4 Eingebauter Formularvalidator🎜🎜🎜🎜1), verwenden Sie die vom integrierten Validator bereitgestellten Validierungsregeln, um die Formularfelder zu überprüfen🎜rrreee🎜2), ermitteln Sie, ob das gesamte Formular überprüft wurde oder nicht🎜 rrreeerrreee🎜3), in der Komponentenvorlage. Wird als Fehlermeldung angezeigt, wenn die Überprüfung erfolgreich ist Der Typ des benutzerdefinierten Validators ist die TypeScript-Klasse. 🎜🎜
- 🎜Die Klasse enthält spezifische Überprüfungsmethoden, bei denen es sich um statische Methoden handeln muss.🎜🎜
- 🎜Die Überprüfungsmethode verfügt über eine Parametersteuerung, der Typ ist AbstractControl. Tatsächlich handelt es sich um den Typ des Instanzobjekts der FormControl-Klasse. 🎜🎜
- 🎜Wenn die Überprüfung erfolgreich ist, wird null zurückgegeben.🎜🎜
- 🎜Wenn die Überprüfung fehlschlägt, wird das Attribut im Objekt zurückgegeben ist die Verifizierungsidentifikation und der Wert ist wahr, was das Element identifiziert. Die Validierung ist fehlgeschlagen🎜🎜
- 🎜Der Rückgabewert der Validierungsmethode ist „ValidationErrors“ | rrreeerrreeerrreee🎜🎜🎜2.7 FormBuilder🎜🎜 🎜🎜Formular erstellen Schnell. 🎜
  - 🎜this.fb.control: Formularelement 🎜🎜
  - 🎜this.fb.group: Formulargruppe, das Formular ist mindestens eine FormGroup🎜🎜<li>🎜<code>this.fb.array: Wird für komplexe Formulare verwendet. Sie können während des Formulars dynamisch Formularelemente oder Formulargruppen hinzufügen Validierung, ein Element in FormArray ist fehlgeschlagen, und das Ganze ist fehlgeschlagen. 🎜🎜🎜rrreee🎜🎜🎜2.8 Überwachen Sie Änderungen in Formularwerten🎜🎜🎜
    实际工作中，我们常常需要根据某个表单值得变化而进行相应的处理，一般可以使用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 = &#39;a&#39;;
  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：表单内容置空
    更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonAngular Learning spricht von zwei Arten von Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist JWT? Wie verwende ich JWT in NodeJS?Nächster Artikel：Was ist JWT? Wie verwende ich JWT in NodeJS?

In Verbindung stehende Artikel

Mehr sehen

Angular Learning spricht von zwei Arten von Formen

一、模板驱动

二、模型驱动

🎜2. Modellgesteuert🎜

In Verbindung stehende Artikel