ng-zorro-antd - 有没有办法在 react 形式中使用 nz-checkbox 或 nz-checkbox-group 或 nz-checkbox-wrapper

Question

如果单独使用，以下代码效果很好，

<nz-checkbox-group [(ngModel)]="field.options" [formControlName]="field.id" (ngModelChange)="updateValue($event)"></nz-checkbox-group>

Angular6.0 不允许 [(ngModel)] 与 FormGroup (Reactive Forms)。 As 在 angular 6.0 中已弃用，并将在 angular 7.0 版本中删除。

有没有什么方法可以为 ReactiveForm 编写 nz-checkbox-group ？

Answer 1

我使用以下方法解决了类似的问题。 SourceCode

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'nz-demo-checkbox-layout',
template: `
    <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)">
      <div nz-row >
       <div [formGroup]="myFormGroup">
        <label nz-checkbox nzValue="A" formControlName="a">A</label>
        <label nz-checkbox  nzValue="B" formControlName="b">B</label>
        <label nz-checkbox nzValue="C" formControlName="c">C</label>
        <label nz-checkbox nzValue="D" formControlName="d">D</label>
       </div>
      </div>
    </nz-checkbox-wrapper>`
})
export class NzDemoCheckboxLayoutComponent {
    constructor(private fb: FormBuilder) { }
    public myFormGroup = this.fb.group({
        a:this.fb.control(true),
        b:this.fb.control(false),
        c:this.fb.control(false),
        d:this.fb.control(false)
    }); 
}