Ng-Zorro Form组件双向绑定指南

Ng-Zorro的form组件可以实现双向绑定，但需要注意一些细节。

首先，确保你已经正确导入了FormsModule和ReactiveFormsModule模块：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    // 其他模块
  ],
  // 其他配置
})
export class AppModule { }

接下来，在组件类中创建一个ReactiveForm并初始化：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['']
      email: ['']
    });
  }
}

然后，在HTML模板中使用ngModel指令绑定表单控件的值：

<form [formGroup]="myForm">
  <input type="text" formControlName="name" [(ngModel)]="myForm.get('name').value">
  <input type="text" formControlName="email" [(ngModel)]="myForm.get('email').value">
</form>

注意，在使用ngModel进行双向绑定时，需要将[(ngModel)]绑定到myForm.get('name').value和myForm.get('email').value，而不是直接绑定到name和email。

这样，当用户在输入框中输入内容时，表单的值会被更新，同时当表单的值发生变化时，输入框中的内容也会被更新。