Question

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

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

Angular6.0不允许[（ngModel）]与FormGroup（反应性表单）一起使用。在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)
    }); 
}

有没有办法在反应形式中使用nz-checkbox或nz-checkbox-group或nz-checkbox-wrapper

1 个答案: