https://angular.io/guide/forms-overview
- Ｈａｎｄｌｉｎｇ
user inputwith forms - Use forms to enable users to
log in, toupdate a profile, toenter sensitive information, and toperform many other data-entry tasks.
The source of truth provides the value and status of the form element at a given point in time.
In Reactive forms , the form model is the source of truth.
Two kinds of forms in Angular
a. Reactive forms
b. Template-driven forms
Commonalities:
√ Ｂｏｔｈ capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Differencies:
process and manage form data differently.
In general:
- Reactive forms :
more robust
more scalable, reusable, and testable
(更健壮, 可扩展性、可复用性和可测试性更强)
If forms are a key part of your application, use it. - Template-driven forms：
easy to add an app
don't scale as well as reactive forms
Basic and simple form requirements: useful for adding a simple form to an app, such as an email list signup form
Key differences:
image.png
Common foundation
image.png
Both reactive and template-driven forms share underlying building blocks.
- FormControl tracks the value and validation status of an individual form control.
- FormGroup tracks the same values and status for a collection of form controls.
- FormArray tracks the same values and status for an array of form controls.
- ControlValueAccessor creates a bridge between Angular FormControl instances and native DOM form elements.
Reactive and template-driven forms both use a form model to track value changes between Angular forms and form input elements.
Form model setup
With reactive forms, the form model is explicitly defined in the component class. The reactive form directive (e.g. FormControlDirective) then links the existing FormControl instance to a specific form element in the view using a value accessor( ControlVanlueAccessor instance)
With template forms, the abstraction of the form model promotes simplicity over structure. The template-driven form directive NgModule is responsible for creating and managing the FormControl instance for a given form element. It's less explicit, but you no longer have direct control over the form model.
FormControlDirective
It is a directive. Syncs a standalone FormControl instance to a form control element.e.g. [formControl]
ControlValueAccessor
It is an interface. Act as a bridge between the Angular forms API and a native element in the DOM. Implement this interface to create a custom form control directive that integrates with Angular forms.
Setup in reactive forms
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component ({
selector: 'app-reactive-favorite-color',
template: `
Favorite Color: <input type="text" [formControl] ="favoriteColor">
`
})
export class FavoriteColorComponent {
favoriteColor=new FormControl(' ');
}
Setup in template-driven forms
import { Component } from '@angular/core';
@Component({
selector: 'app-template-favorite-color',
template: `
Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
`
})
export class FavoriteColorComponent {
favoriteColor = ' ';
}
Data flow in forms
in reactive forms each form element in the view is directly linked to a form model
FormControlinstance). Updates from the view to the model and from the model to the view are synchronous and aren't dependent on the UI rendered.
image.png
image.png
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
小结：
- 表单的作用： 用户输入， 个人档案修改， 敏感信息输入， 或其他数据输入的工作
- 数据源给form 表单元素提供数据的值和状态。 这里的数据源是 form model， form model 定义在ts 文件中， 是FormControl 的实例。
- Angular 中有两种实现表单的方法： 响应式表单 和 模板驱动式表单。
- 响应式表单： 在ts 文件中显示定义， e.g.
fm = new FormControl(' '), 表单元素与form model 直接连接.
e.g.<html><input type="text" [formControl]="fm"></html>
网友评论