ng-book札记——表单
Angular表单的基本对象为FormControl与FormGroup。
FormControl
FormControl代表单个input表单字段(field),即Angular表单的最小单元。
FormControl封装了表单字段的值与状态(valid, dirty, errors)。
在TypeScript中创建FormControl:
// create a new FormControl with the value "Nate" let nameControl = new FormControl("Nate"); let name = nameControl.value; // -> Nate // now we can query this control for certain values: nameControl.errors // -> StringMap<string, any> of errors nameControl.dirty // -> false nameControl.valid // -> true
在DOM中绑定:
<input type="text" [formControl]="nameControl" />
FormGroup
FormGroup是FormControl集合的包装器。
let personInfo = new FormGroup({ firstName: new FormControl("Nate"), lastName: new FormControl("Murray"), zip: new FormControl("90210") })
由于FormGroup与FormControl继承了相同的基类(AbstractControl),这意味着可以像FormControl一样检查其值与状态。
personInfo.value; // -> { // firstName: "Nate", // lastName: "Murray", // zip: "90210" // } // now we can query this control group for certain values, which have sensible // values depending on the children FormControl's values: personInfo.errors // -> StringMap<string, any> of errors personInfo.dirty // -> false personInfo.valid // -> true
Angular中使用表单有FormsModule与ReactiveFormsModule两种方式。
FormsModule
导入FormsModule后, 将自动对相关视图中的任意<form>
标签附加NgForm。
NgForm提供两样功能:
- 名为ngForm的FormGroup
- (ngSubmit)
import { FormsModule } from '@angular/forms'; // farther down... @NgModule({ declarations: [ FormsDemoApp, DemoFormSkuComponent, // ... our declarations here ], imports: [ BrowserModule, FormsModule, // <-- add this ], bootstrap: [ FormsDemoApp ] }) class FormsDemoAppModule {}
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-demo-form-sku', templateUrl: './demo-form-sku.component.html', styles: [] }) export class DemoFormSkuComponent implements OnInit { constructor() { } ngOnInit() { } onSubmit(form: any): void { console.log('you submitted value:', form); } }
<div class="ui raised segment"> <h2 class="ui header">Demo Form: Sku</h2> <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" class="ui form"> <div class="field"> <label for="skuInput">SKU</label> <input type="text" id="skuInput" placeholder="SKU" name="sku" ngModel> </div> <button type="submit" class="ui button">Submit</button> </form> </div>
#f="ngForm"为视图创建一个本地变量f,并绑定了ngForm。这样在视图的其它地方就可以灵活使用,比如在(ngSubmit)="onSubmit(f.value)中。
在input元素里,单独的ngModel特性表示一个单向绑定,以及在表单中创建一个名为sku的FormControl,并且自动添加至父级的FormGroup(这里是form)。
ReactiveFormsModule
这种方式下可以通过FormBuilder帮助创建FormGroup与FormControl。
import { ReactiveFormsModule } from '@angular/forms'; // farther down... @NgModule({ declarations: [ FormsDemoApp, DemoFormSkuComponent, // ... our declarations here ], imports: [ BrowserModule, ReactiveFormsModule // <-- and this ], bootstrap: [ FormsDemoApp ] }) class FormsDemoAppModule {}
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-with-builder', templateUrl: './demo-form-sku-with-builder.component.html', styles: [] }) export class DemoFormSkuWithBuilderComponent implements OnInit { myForm: FormGroup; constructor(fb: FormBuilder) { this.myForm = fb.group({ 'sku': ['ABC123'] }); } ngOnInit() { } onSubmit(value: string): void { console.log('you submitted value: ', value); } }
<div class="ui raised segment"> <h2 class="ui header">Demo Form: Sku with Builder</h2> <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="ui form"> <div class="field"> <label for="skuInput">SKU</label> <input type="text" id="skuInput" placeholder="SKU" [formControl]="myForm.controls['sku']"> </div> <button type="submit" class="ui button">Submit</button> </form> </div>
视图中通过[formGroup]="myForm"绑定已创建的FormGroup,同时onSubmit也改为myForm.value。
而对于input元素,现在借由[formControl]="myForm.controls['sku']"方式绑定已创建的FormControl。
验证
向一个FormControl添加验证器很简单,只需要将其传入第二个参数。
let control = new FormControl('sku', Validators.required);
如果是FormBuilder的话,可以使用以下语法:
import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms'; @Component({ selector: 'app-demo-form-with-validations-explicit', templateUrl: './demo-form-with-validations-explicit.component.html', styles: [] }) export class DemoFormWithValidationsExplicitComponent { myForm: FormGroup; sku: AbstractControl; constructor(fb: FormBuilder) { this.myForm = fb.group({ 'sku': ['', Validators.required] }); this.sku = this.myForm.controls['sku']; } onSubmit(value: string): void { console.log('you submitted value: ', value); } }
<div class="ui raised segment"> <h2 class="ui header">Demo Form: with validations (explicit)</h2> <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="ui form" [class.error]="!myForm.valid && myForm.touched"> <div class="field" [class.error]="!sku.valid && sku.touched"> <label for="skuInput">SKU</label> <input type="text" id="skuInput" placeholder="SKU" [formControl]="sku"> <div *ngIf="!sku.valid" class="ui error message">SKU is invalid</div> <div *ngIf="sku.hasError('required')" class="ui error message">SKU is required</div> </div> <div *ngIf="!myForm.valid" class="ui error message">Form is invalid</div> <button type="submit" class="ui button">Submit</button> </form> </div>
* 通过myForm的valid属性值可以判断所有FormControl是否皆有效。
* [class.error]可以根据FormControl有效与否变更样式。
* sku.hasError('required'),可以指定特定的验证要求。
验证器还能够按照需求定制:
function skuValidator(control: FormControl): { [s: string]: boolean } { if (!control.value.match(/^123/)) { return {invalidSku: true}; } } constructor(fb: FormBuilder) { this.myForm = fb.group({ 'sku': ['', Validators.compose([ Validators.required, skuValidator])] });
<div *ngIf="sku.hasError('invalidSku')" class="ui error message">SKU must begin with <span>123</span></div>
监察
FormGroup与FormControl都有自己的EventEmitter,可以用于观察变化。
方式很简单,使用其valueChanges的subscribe方法进行订阅。
constructor(fb: FormBuilder) { this.myForm = fb.group({ 'sku': ['', Validators.required] }); this.sku = this.myForm.controls['sku']; this.sku.valueChanges.subscribe( (value: string) => { console.log('sku changed to:', value); } ); this.myForm.valueChanges.subscribe( (form: any) => { console.log('form changed to:', form); } ); }
推荐阅读
-
Symfony表单都是后端输出的吗?
-
symfony怎么用css来控制表单的样式?
-
php防止站外远程提交表单的方法_PHP
-
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号_php实例
-
YII2.0之Activeform表单组件用法实例_PHP
-
1.Ci 框架中表单提交 控制器进行处理的时候发现URL的路径不对
-
【MySQL札记】mysql源码安装/配置步骤及支持中文gbk/gb2312编码
-
js防止表单重复提交实现代码_javascript技巧
-
vue指令:v-model绑定表单控件;v-model与v-bind结合使用
-
Angular使用ng-messages与PHP进行表单数据验证