Dieser Artikel führt Sie durch die Formulare in Angular, spricht über responsive Formulare und vorlagengesteuerte Formulare und stellt vor, wie responsive Formulare Formulareingaben überprüfen. Ich hoffe, dass er für alle hilfreich ist!
Angular bietet zwei verschiedene Methoden zur Verarbeitung von Benutzereingaben über Formulare: Responsive Formulare und Vorlagengesteuerte Formulare . Beide erfassen Benutzereingabeereignisse aus der Ansicht, validieren Benutzereingaben, erstellen Formularmodelle, ändern das Datenmodell und bieten eine Möglichkeit, diese Änderungen zu verfolgen. [Verwandte Tutorial-Empfehlungen: „响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径。【相关教程推荐：《angular教程》】
响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。模板驱动表单依赖模板中的指令Angular Tutorial| Formularmodell erstellen | ||||||||||||||
| Implizit, erstellt durch Anweisungen | Datenmodell ... |
| 类 | 说明 |
|---|---|
| AbstractControl | 所有三种表单控件类（FormControl、FormGroup 和 FormArray）的抽象基类。它提供了一些公共的行为和属性。 |
| FormControl | 管理单体表单控件的值和有效性状态。它对应于 HTML 的表单控件，比如 或 。 |
| FormGroup | 管理一组 AbstractControl 实例的值和有效性状态。该组的属性中包括了它的子控件。组件中的顶层表单就是 FormGroup。 |
| FormArray | 管理一些 AbstractControl 实例数组的值和有效性状态。 |
| FormBuilder | 一个可注入的服务，提供一些用于提供创建控件实例的工厂方法。 |
在模板驱动表单中，表单模型是隐式的，而不是显式的。指令 NgModel 为指定的表单元素创建并管理一个 FormControl 实例。
下面的组件使用模板驱动表单为单个控件实现了同样的输入字段。
import { Component } from '@angular/core';
@Component({
selector: 'app-template-favorite-color',
template: `
Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
`
})
export class FavoriteColorComponent {
favoriteColor = '';
}在组件类中直接把验证器函数添加到表单控件模型上（FormControl）。然后，一旦控件发生了变化，Angular 就会调用这些函数。
验证器函数可以是同步函数，也可以是异步函数。
一组验证错误或 null。你可以在实例化一个 FormControl 时把它作为构造函数的第二个参数传进去。一个 Promise 或 Observable，它稍后会发出一组验证错误或 null。在实例化 FormControl 时，可以把它们作为第三个参数传入。出于性能方面的考虑，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器。当每一个异步验证器都执行完之后，才会设置这些验证错误。
在模板驱动表单中用作属性的那些内置验证器，比如 required 和 minlength，也都可以作为 Validators 类中的函数使用
public profileForm = new FormGroup({
firstName: new FormControl('', [
Validators.required
]),
});
this.profileForm.get('firstName').valueChanges.subscribe({
next: value => {
console.log("First Name is: " + value);
console.log(this.profileForm.get('firstName').errors);// { required: true } | null
}
}); <form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName="firstName">
<div *ngIf="firstName.errors?.required">
Name is required.
</div>
</label>
</form>内置的验证器并不是总能精确匹配应用中的用例，因此有时你需要创建一个自定义验证器。
public profileForm = new FormGroup({
firstName: new FormControl('', [
Validators.required,
this.forbiddenNameValidator(/bob/i)
])
});
public forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? {forbiddenName: {value: control.value}} : null;
};
}
get firstName() { return this.profileForm.get('firstName'); }
this.profileForm.get('firstName').valueChanges.subscribe({
next: value => {
console.log("First Name is: " + value); // First Name is: bob
console.log(JSON.stringify(this.profileForm.get('firstName').errors));// {"forbiddenName":{"value":"bob"}} | null
}
});跨字段交叉验证器是一种自定义验证器，可以对表单中不同字段的值进行比较，并针对它们的组合进行接受或拒绝。
下列交叉验证的例子说明了如何进行如下操作：
要想在单个自定义验证器中计算这两个控件，你就必须在它们共同的祖先控件中执行验证： FormGroup。你可以在 FormGroup 中查询它的子控件，从而让你能比较它们的值。要想给 FormGroup 添加验证器，就要在创建时把一个新的验证器传给它的第二个参数。
this.profileForm.valueChanges.subscribe( {
next: value => {
console.log(JSON.stringify(this.profileForm.errors));// {"identityRevealed":true} | null
}
});
public profileForm = new FormGroup({
firstName: new FormControl('', [
Validators.required,
]),
lastName: new FormControl(''),
}, { validators: this.identityRevealedValidator});
public identityRevealedValidator(control: FormGroup): ValidationErrors | null{
const firstName = control.get('firstName');
const lastName = control.get('lastName');
return firstName && lastName && firstName.value === lastName.value ? { identityRevealed: true } : null;
};异步验证器实现了 AsyncValidatorFn 和 AsyncValidator 接口。它们与其同步版本非常相似，但有以下不同之处。
Promise 或可观察对象，有尽的，这意味着它必须在某个时刻完成（complete）。要把无尽的可观察对象转换成有尽的，可以在管道中加入过滤操作符，比如 first、last、take 或 takeUntil。异步验证在同步验证完成后才会发生，并且只有在同步验证成功时才会执行。如果更基本的验证方法已经发现了无效输入，那么这种检查顺序就可以让表单避免使用昂贵的异步验证流程（例如 HTTP 请求）。
let formControl = this.profileForm.get('firstName');
formControl.updateValueAndValidity();更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonTiefes Verständnis für Formen in Angular (responsiv und vorlagengesteuert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So lösen Sie das Problem, dass die IE-Verknüpfung nicht gelöscht werden kann
So überspringen Sie die Online-Aktivierung in Win11
Java-Tutorial
statistische Analyse
Das Computersystem besteht aus
Der Unterschied zwischen Pastenmaske und Lötstoppmaske
Verwendung der MySQL-Datediff-Funktion
kb4012212 Was tun, wenn das Update fehlschlägt?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
