Angular 响应式表单

在上一篇文章中，我们介绍了 Angular 模板式表单。本文将继续介绍如何使用 Angular 响应式表单。

打开在上一篇文章中创建的项目 my-app-login-form。

1. 导入响应式表单依赖包，并把 ReactiveFormsModule 添加到 AppModule 的 imports 属性中：

…
import { FormsModule, ReactiveFormsModule } from "@angular/forms”;

…

@NgModule({
…
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
…
})
export class AppModule { }

我们既导入了 FormsModule，又导入了 ReactiveFormsModule. 在一个 Angular 应用中，可以同时使用这两种表单。

2. 使用下面命令，创建一个响应式表单组件。

ng generate component reactive-login

3. 打开 reactive-login.component.ts 文件，定义属性 loginForm，属性的值为 FormGroup 类型的对象。

loginForm = new FormGroup({});

我们在 FormGroup 类型的构造函数中，以键值对的方式，添加两个表单控件 FormControl 对象，分别对应用户名和密码。

loginForm = new FormGroup({
  username: new FormControl(‘’),
  password: new FormControl(‘’)
});

4. 拷贝 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>

5. 使用 formGroup 指令，绑定表单 form 元素和组件类中的 loginForm 属性（FormGroup 实例）。

<form [formGroup]="loginForm" (ngSubmit)="login()”>

6. 使用 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>

7. 拷贝 LoginComponent 的 login 方法，粘贴到 reactive-login.component.ts 文件中，并修改如下：

  login() {
    const controls = this.loginForm.controls;
    console.log('User: ' + controls.username.value);
    console.log('Password: ' + controls.password.value);
  }

8. 运行项目，打开浏览器访问首页，键入用户名和密码后，点击登录按钮，控制台会输出刚刚输入的用户名和密码信息。

登录表单页面

参考资料

• https://angular.io/guide/forms-overview