ng-zorro-antd - 有没有办法在反应形式中使用 nz-checkbox 或 nz-checkbox-group 或 nz-checkbox-wrapper
问题描述
如果独立使用,以下代码效果很好,
<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 吗?
解决方案
我使用以下方法解决了类似的问题。源代码
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)
});
}
推荐阅读
- python - 如何让 Atom 在终端 platformio-ide-terminal 中运行 Python3?
- python - 如何使用 tensorflow 以编程方式确定可用的 GPU 内存?
- google-apps-script - 在谷歌表格脚本编辑器中看不到脚本代码
- xamarin.forms - 在 Xamarin Forms 中使用 ZXing 扫描 QR 码时使用自动手电筒
- node.js - 我应该依靠 worker_threads 模块来解析来自 HTTP 请求的任何输入数据吗?
- reactjs - MaterialUI + React 测试库:单元测试 Select MenuItem 在升级到版本 4 后中断
- r - 在 Rmd 文件中呈现时,ggmap 太小?
- substring - 如何消除查询错误:Grafana 中的 403?示例是子字符串
- swift - 如何将不同的音频文件混合到一个文件中
- python - 如何单击 selenium python 中的按钮