Building Reactive Forms with ng-zorro in Angular

Basic Usage

1. Page Structure

<form nz-form [formGroup]="validateForm">
  <!-- Basic Input -->
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>Indicator Name</nz-form-label>
    <nz-form-control [nzSpan]="20" nzErrorTip="Please enter the indicator name!">
      <input formControlName="name" nz-input />
    </nz-form-control>
  </nz-form-item>

  <!-- One Row, Two Items -->
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>Indicator Code</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please enter the indicator code!">
      <input formControlName="code" nz-input />
    </nz-form-control>

    <nz-form-label [nzSpan]="4" nzRequired>Data Source</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please select a data source!">
      <nz-select formControlName="datasourceType">
        <nz-option nzLabel="Attribute Data" [nzValue]="'Attribute Data'"></nz-option>
        <nz-option nzLabel="Spatial Data" [nzValue]="'Spatial Data'"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4"> Indicator Description</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <textarea nz-input formControlName="remark" rows="8"></textarea>
    </nz-form-control>
  </nz-form-item>
</form>

2. Ts Structure

export class IndexCenterComponent implements OnInit {
  constructor(private fb: FormBuilder) {}

  validateForm: FormGroup;

  ngOnInit() {
    this.validateForm = this.fb.group({
      code: [null, [Validators.required]],
      name: [null, [Validators.required]],
      datasourceType: [null, [Validators.required]],
      remark: [null, []],
    });
  }

  // Field validation
  submit() {
    for (let key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsDirty();
      this.validateForm.controls[key].updateValueAndValidity();
    }

    if (this.validateForm.valid) {
      console.log(this.validateForm.value);
    }
  }
}

1. Regarding the inability to use ngModel

[ngModelOptions] = "{ standalone: true }";

For example:

<label
  nz-checkbox
  [ngModelOptions]="{ standalone: true }"
  [ngModel]="item.checked"
  [nzValue]="item.value"
  >{{ item.label }}</label
>

AI Translation | AI 翻译

This article was translated from Chinese to English by AI. If there are any inaccuracies, please refer to the original Chinese version.


本文由 AI 辅助从中文翻译为英文。如遇不准确之处，请以中文原版为准。