Angular 表单简介
Angular 中有两种表单:
Template-driven 表单的特点
Reactive 表单的特点
Template-driven vs Reactive 表单Template-driven 表单
Reactive 表单
表单控件的状态
HTML Form vs Template-driven Form vs Reactive FormHTML 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 需要以下几个步骤:
import { ReactiveFormsModule } from "@angular/forms";
@NgModule({ imports: [ BrowserModule,ReactiveFormsModule ],}) export class AppModule { }
<form (ngSubmit)="save()" [formGroup]="signupForm"></form>
<input type="text" name="userName" placeholder="请输入用户名" formControlName="userName"> 使用 FormGroup
signupForm: FormGroup; this.signupForm = new FormGroup({ userName: new FormControl('',[Validators.required,Validators.minLength(3)]),email: new FormControl('',Validators.email]),... }); 使用 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修仙目录 - 表单章节。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |