脚本宝典收集整理的这篇文章主要介绍了Angular 表单简介,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Angular 中有两种表单:
Template-driven 表单的特点@H_126_19@
Reactive 表单的特点
Template-driven vs Reactive 表单
Template-driven 表单
-
模板
-
组件类
-
指令 (FormsModule)
ngForm
ngModel
ngModelGroup
Reactive 表单
-
模板
Form 元素
Input 元素
Form 模型绑定
-
组件类
Form 模型
验证规则
错误消息
数据模型相关属性
表单操作相关的方法,如表单提交 (submit)
-
指令 (ReactiveFormsModule)
表单控件的状态
-
Value Changed
-
Validity
valid - 表单控件有效
invalid - 表单控件无效
-
Visited
touched - 表单控件已被访问过
untouched - 表单控件未被访问过
HTML Form vs Template-driven Form vs Reactive Form
HTML Form
<form>
<div>
<label>
<span>用户名</span>
<input
type="text"
name="userName"
placeholder="请输入用户名">
</label>
</div>
...
<button type="submit">注册</button>
</form>
Template-driven Form
<form (ngSubmit)="save(signupForm)" #signupForm="ngForm">
<div>
<label>
<span>用户名</span>
<input type="text" name="userName"
placeholder="请输入用户名"
required minlength="3"
[(ngModel)]="user.userName"
#userName="ngModel">
</label>
<div *ngIf="userName.touched && userName.errors?.required">
用户名是必填项
</div>
<div *ngIf="userName.touched && userName.errors?.minlength">
用户名的长度必须大于3
</div>
</div>
...
<button type="submit">注册</button>
</form>
Reactive Form
<form (ngSubmit)="save()" [formGroup]="signupForm">
<div>
<label>
<span>用户名</span>
<input type="text" name="userName"
placeholder="请输入用户名"
formControlName="userName">
</label>
<div *ngIf="signupForm.get('userName').touched &&
signupForm.get('userName').hasError('required')">
用户名是必填项
</div>
<div *ngIf="signupForm.get('userName').touched &&
signupForm.get('userName').hasError('minlength')">
用户名的长度必须大于3
</div>
</div>
...
<button type="submit" [disabled]="signupForm.invalid">注册</button>
</form>
接下来我们主要来介绍一下 Reactive Form 的一些相关基础知识。
Reactive Form 简介
使用 Reactive Form
要使用 Reactive Form 需要以下几个步骤:
导入 ReactiveFormsModule
import { ReactiveFormsModule } From "@Angular/forms";
在 NgModule 的 imports
属性值对应的数组中,添加 ReactiveFormsModule
@NgModule({
imports: [
browserModule,
ReactiveFormsModule
],
})
export class AppModule { }
绑定 form 元素的 formGroup
属性
<form (ngSubmit)="save()" [formGroup]="signupForm"></form>
关联 input 元素对应的 FormControl
实例
<input type="text" name="userName" placeholder="请输入用户名"
formControlName="userName">
使用 FormGroup
创建 FormGroup 属性
创建 FormGroup 实例
创建每个 FormControl 实例
signupForm: FormGroup;
this.signupForm = new FormGroup({
userName: new FormControl('', [Validators.required, Validators.minLength(3)]),
email: new FormControl('', [Validators.required, Validators.email]),
...
});
使用 FormBuilder
要使用 FormBuilder 需要以下几个步骤:
导入 FormBuilder
注入 FormBuilder 实例
使用 FormBuilder 实例
FormBuilder 创建 Form Control 语法
方式一
this.signupForm = this.fb.group({
userName: 'SEMlinker',
hasAddress: false
});
方式二
this.signupForm = this.fb.group({
userName: {value: 'semlinker', disabled: true}
hasAddress: {value: true, disabled: false}
});
方式三
this.signupForm = this.fb.group({
userName: [''],
hasAddress: [{value: true, disabled: false}]
})
进阶资源
-
Angular 4.x Template Driven Forms
涉及 ngModel、[ngModel]、[(ngModel)]、ngModelGroup、Template-Driven error validation
-
Angular 4.x Template-driven Forms Demo
涉及 Template-driven 表单常用控件,如 text、radio、select (基本类型、对象)、multi select、casCADing select (级联)、multi checkbox 等控件的使用
-
涉及 FormControl、FormGroup、Reactive Submit、Reactive Forms error validation、FormBuilder
-
Angular 4.x Custom Form Control
涉及 ControlValueAccessor、自定义验证规则等
-
@L_512_15@
涉及动态创建表单的相关内容
若想进一步阅读更多表单相关的资料,请查看 Angular 4修仙目录 - 表单章节。
以上是脚本宝典为你收集整理的Angular 表单简介全部内容,希望文章能够帮你解决Angular 表单简介所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。