当使用 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);
}
}
- 角度: 9.1
- ng-zorro-antd: 8.5.2
- 浏览器: MacO 上的 Google Chrome(版本 80.0.3987.163)
- 复制链接: https ://ng-zorro-antd-start-kbyxfz.stackblitz.io
- 工作示例,但使用 [(ngModel)]:https ://fcpyjp.run.stackblitz.io
谢谢