1

当使用 ng-zorro-antd 库中的 nz-select 时,我正在努力弄清楚如何在 formGroup 中使用 formArray ...

HTML:

<form nz-form [formGroup]="testForm" (ngSubmit)="onSubmit(testForm)">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="thingsAroundProperty">
      Things around
    </nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="The input is not valid">
       <nz-select nzMode="tags" nzPlaceHolder="Tag Mode" formArrayName="thingsAroundProperty">
          <nz-option *ngFor="let item of thingsAroundProperty; index as i;" [nzLabel]="item" [nzValue]="item">
          </nz-option>
         </nz-select>
      </nz-form-control>
  </nz-form-item>

  <button type="submit">Submit Form</button>
</form>

TS:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  testForm: FormGroup;
  items = ['Gym', 'Pharmacy', 'Park'];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.fb.group({
      selectTag: this.fb.array([])
    })
  }

  onSubmit(form: FormGroup) {
    console.log(form);
  }
}

谢谢

4

0 回答 0