Angular框架中使用响应式表单

Angular 总共提供了 3 中表单实现方式，分别是：Template-driven Forms （模板驱动表单）、 Reactive Forms （响应式表单）、Dynamic Forms （动态表单）。

在我们要使用响应式表单的那个模块里面引入响应式表单模块，我们需要在 imports 中添加ReactiveFormsModule。

引入响应式表单模块

// 用到双向数据绑定必须引入
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';

import { DefaultRoutingModule } from './default-routing.module';
import { DefaultComponent } from './default.component';
import { HomeComponent } from './home/home.component';
import { ReportComponent } from './report/report.component';
import { KeywordsComponent } from './keywords/keywords.component';
import { AlarmComponent } from './alarm/alarm.component';
// 用到双向数据绑定必须引入
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// 按钮图标组件
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
// 布局组件需要引入的模块
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
// highcharts模块
import { HighchartsChartModule } from 'highcharts-angular';
// 日期组件
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
// 栅格布局
import { NzGridModule } from 'ng-zorro-antd/grid';
// 表格
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { KeywordAddComponent } from './keywords/keyword-add/keyword-add.component';
// 对话框
import { NzModalModule } from 'ng-zorro-antd/modal';
// 表单
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';

registerLocaleData(zh);

@NgModule({
  declarations: [
    DefaultComponent,
    HomeComponent,
    ReportComponent,
    KeywordsComponent,
    AlarmComponent,
    KeywordAddComponent
  ],
  imports: [
    CommonModule,
    DefaultRoutingModule,
    NzButtonModule,
    NzIconModule,
    NzLayoutModule,
    NzMenuModule,
    NzBreadCrumbModule,
    HighchartsChartModule,
    NzDatePickerModule,
    FormsModule,
    NzGridModule,
    NzTableModule,
    NzDividerModule,
    NzModalModule,
    NzInputModule,
    NzFormModule,
    ReactiveFormsModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
})
export class DefaultModule { }

表单的模板文件代码

表单中只能使用固定的formControlName去实现双向数据绑定，不能使用ng-model

<nz-modal [(nzVisible)]="isVisible" nzTitle="新增关键词" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading">
  <form *nzModalContent nz-form [formGroup]="keywordForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="keyword">必须包含</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入必须包含的信息">
        <input nz-input formControlName="keyword" id="keyword" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="nokeyword">不包含</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入不包含的信息">
        <input nz-input formControlName="nokeyword" id="nokeyword" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="may_keyword">可包含</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入可包含的信息">
        <input nz-input formControlName="may_keyword" id="may_keyword" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="frequency">操控评率</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入操控评率">
        <input nz-input formControlName="frequency" id="frequency" />
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

表单的ts文件代码

在 KeywordAddComponent中注入 FormBuilder 对象，并添加 keywordForm表单组。

  keywordForm!: FormGroup;

constructor(private fb: FormBuilder) {
}

  ngOnInit(): void {
    this.keywordForm = this.fb.group({
      keyword: [null, [Validators.required]],
      may_keyword: [null, [Validators.required]],
      nokeyword: [null, [Validators.required]],
      frequency: [null, [Validators.required]]
    })
  }

submitForm() {
    for (const i in this.keywordForm.controls) {
      if (this.keywordForm.controls.hasOwnProperty(i)) {
        this.keywordForm.controls[i].markAsDirty();
        this.keywordForm.controls[i].updateValueAndValidity();
      }
    }
}