Following code works great if is used independently,
<nz-checkbox-group [(ngModel)]="field.options" [formControlName]="field.id" (ngModelChange)="updateValue($event)"></nz-checkbox-group>
Angular6.0 does not allow [(ngModel)] with FormGroup (Reactive Forms). As is deprecated in angular 6.0 and will be removed in angular 7.0 version.
Is there any method to write nz-checkbox-group for ReactiveForm ?
I got a similar problem solved that using the following method. 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)
});
}