Angular 响应式表单
2022-05-28 本文已影响0人
品品下午茶
在上一篇文章中，我们介绍了 Angular 模板式表单。本文将继续介绍如何使用 Angular 响应式表单。
打开在上一篇文章中创建的项目 my-app-login-form。
- 导入响应式表单依赖包，并把
ReactiveFormsModule添加到AppModule的imports属性中：
…
import { FormsModule, ReactiveFormsModule } from "@angular/forms”;
…
@NgModule({
…
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
…
})
export class AppModule { }
我们既导入了 FormsModule，又导入了 ReactiveFormsModule. 在一个 Angular 应用中，可以同时使用这两种表单。
- 使用下面命令，创建一个响应式表单组件。
ng generate component reactive-login
- 打开
reactive-login.component.ts文件，定义属性loginForm，属性的值为FormGroup类型的对象。
loginForm = new FormGroup({});
我们在 FormGroup 类型的构造函数中，以键值对的方式，添加两个表单控件 FormControl 对象，分别对应用户名和密码。
loginForm = new FormGroup({
username: new FormControl(‘’),
password: new FormControl(‘’)
});
- 拷贝
login.component.html文件的全部内容，粘贴到reactive-login.component.html文件中。
<form (ngSubmit)="login()”>
<div>
<input type="text" name="username" placeholder="Username" [(ngModel)]=“username”>
</div>
<div>
<input type="password" name="password" placeholder="Password" [(ngModel)]=“password”>
</div>
<button type="submit">Login</button>
</form>
- 使用
formGroup指令，绑定表单form元素和组件类中的loginForm属性（FormGroup 实例）。
<form [formGroup]="loginForm" (ngSubmit)="login()”>
- 使用
formControlName指令，绑定input元素与组件类中的FormControl实例。此外，需要移除ngModel的双向数据绑定指令。
<div>
<input type="text" name="username" placeholder="Username" formControlName=“username”>
</div>
<div>
<input type="password" name="password" placeholder="Password" formControlName=“password”>
</div>
- 拷贝
LoginComponent的login方法，粘贴到reactive-login.component.ts文件中，并修改如下：
login() {
const controls = this.loginForm.controls;
console.log('User: ' + controls.username.value);
console.log('Password: ' + controls.password.value);
}
- 运行项目，打开浏览器访问首页，键入用户名和密码后，点击登录按钮，控制台会输出刚刚输入的用户名和密码信息。
登录表单页面
