Angular响应式表单--附上完整代码演示
Angular响应式表单--文后附上完整代码演示
响应式表单—单个控件
a) 根模块app-.module.ts导入ReactiveFormsModule
import {ReactiveFormsModule} from '@angular/forms';
b) 组件NameEditor使用时引入FormControl表单控件，并创建实例
name=new FormControl(‘请输入名字’);
c) 表单绑定
<input type="text" [formControl]="name">
d) 获取表单控件值：{{ name.value }}
e) 设置表单控件值：this.name.setValue('Nancy');
响应式表单—控件组
a) 导入ReactiveFormsModule
b) 组件导入import { FormControl,FormGroup} from '@angular/forms';
c) 创建实例化对象及页面显示
profileGroup=new FormGroup(
{
firstName:new FormControl("fname"),
lastName:new FormControl("lname"),
}
);
<form [formGroup]="profileGroup" (ngSubmit)="onSubmit()">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
<button type="submit" [disabled]="!profileGroup.valid">submit</button>
</form>
d) FormGroup 指令会监听 form 元素发出的 submit 事件，并使用回调函数做出反应
对应方法：在控制台上可以看见所提交的数据
onSubmit() {
console.warn(this.profileGroup.value);
}
响应式表单—嵌套式
a) 在profileGroup中嵌入一个FormGroup对象
profileGroup=new FormGroup( { firstName:new FormControl(''), lastName:new FormControl(''), address:new FormGroup({ street: new FormControl(''), city: new FormControl(''), }) } );
b) HTML文件修改，嵌入profileGroup表单里
<div formGroupName="address"> <h3>Address</h3> <label> Street: <input type="text" formControlName="street"> </label> <label> City: <input type="text" formControlName="city"> </label> </div>
c) 更新模型部分数据patchValue
this.profileGroup.patchValue({ firstName: 'Nancy', address: { street: '123 Drew Street' } })
响应式表单—嵌套式--使用FormBuilder创建表单组
a) 组件引入import { FormBuilder } from '@angular/forms';
b) 注入依赖constructor(private fb: FormBuilder) { }
c) 实例化FormGroup对象，使用group函数
profileForm = this.fb.group({ firstName: [''], lastName: [''], address: this.fb.group({ street: [''], city: [''], }), });
表单验证
a) 表单引入验证器import { Validators } from '@angular/forms';
b) 设置必需属性：
firstName: ['',Validators.required]
或者
<input type="text" formControlName="firstName" required>
c) 表单控件上添加了一个必填字段时，它的初始值是无效的（invalid）。这种无效状态会传播到其父 FormGroup 元素中，也让这个 FormGroup 的状态变为无效的，因此页面加载后，submit按钮是不可用的，当输入firstName时，又变成可用的
动态表单的创建
a) 使用FormBuilder创建表单数组，并可在页面已经加载后增加其内的表单控件
aliases: this.fb.array([//表单数组，可变 this.fb.control('') ])
b) 使用get方法来获得FromArry类型的表单数组
当点击添加按钮时，使用push动态地向数组内添加控件
get aliases() { return this.profileForm.get('aliases') as FormArray; }
addAlias(): void {
this.aliases.push(this.fb.control(''));
}
c) 在页面中加载
<div formArrayName="aliases">
完整代码
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NameEditorComponent } from './components/name-editor/name-editor.component';
import { ProfileEditorComponent } from './components/profile-editor/profile-editor.component';
@NgModule({
declarations: [
AppComponent,
NameEditorComponent,
ProfileEditorComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.module.html
<app-name-editor></app-name-editor> <br> <hr> <br> <app-profile-editor></app-profile-editor> <router-outlet></router-outlet>
name-editor.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl} from '@angular/forms';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent implements OnInit {
name=new FormControl('请输入名字');
constructor() { }
ngOnInit(): void {
}
updateName() {
this.name.setValue('Nancy');
}
}
name-editor.component.html
<label> Name: <input type="text" [formControl]="name"> </label> <p> Value: {{ name.value }} </p> <button (click)="updateName()">Update Name</button>
profile-editor.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl,FormGroup} from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';//验证器
import { FormArray } from '@angular/forms';
@Component({
selector: 'app-profile-editor',
templateUrl: './profile-editor.component.html',
styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent implements OnInit {
//表单组
profileGroup=new FormGroup(
{
firstName:new FormControl(''),
lastName:new FormControl(''),
address:new FormGroup({//表单组，不可变
street: new FormControl(''),
city: new FormControl(''),
}),
}
);
// 使用FormBuilder创建表单组
profileForm = this.fb.group({
firstName: ['',Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
}),
aliases: this.fb.array([//表单数组，可变
this.fb.control('')
])
});
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
}
onSubmit() {
console.warn(this.profileGroup.value);
}
updateProfile() {
this.profileGroup.patchValue({
firstName: 'Nancy',
address: {
street: '123 Drew Street'
}
});
}
get aliases() {
return this.profileForm.get('aliases') as FormArray;
}
addAlias() {
this.aliases.push(this.fb.control(''));
}
}
profile-editor.component.html
<form [formGroup]="profileGroup" (ngSubmit)="onSubmit()"> <label> First Name: <input type="text" formControlName="firstName"> </label> <label> Last Name: <input type="text" formControlName="lastName"> </label> <div formGroupName="address"> <h3>Address</h3> <label> Street: <input type="text" formControlName="street"> </label> <label> City: <input type="text" formControlName="city"> </label> </div> <button type="submit" [disabled]="!profileGroup.valid">submit</button> </form> <button (click)="updateProfile()">Update Profile</button> <hr> <br> <h2> 使用FormBuilder创建表单组</h2> <form [formGroup]="profileForm" (ngSubmit)="onSubmit()"> <label> First Name: <input type="text" formControlName="firstName"> </label> <label> Last Name: <input type="text" formControlName="lastName"> </label> <div formGroupName="address"> <h3>Address</h3> <label> Street: <input type="text" formControlName="street"> </label> <label> City: <input type="text" formControlName="city"> </label> </div> <div formArrayName="aliases"> <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button> <div *ngFor="let alias of aliases.controls; let i=index"> <!-- The repeated alias template --> <label> Alias: <input type="text" [formControlName]="i"> </label> </div> </div> <button type="submit" [disabled]="!profileForm.valid">submit</button> </form> <!-- profileForm的状态 --> <p> Form Status: {{ profileForm.status }} </p>
