在Angular中结合ng-zorro构建响应式表单
大约 1 分钟
基本使用
- 页面结构
<form nz-form [formGroup]="validateForm">
<!-- 基本输入 -->
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>指标名称</nz-form-label>
<nz-form-control [nzSpan]="20" nzErrorTip="请输入指标名称!">
<input formControlName="name" nz-input />
</nz-form-control>
</nz-form-item>
<!-- 一行 两项 -->
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>指标编号</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请输入指标编号!">
<input formControlName="code" nz-input />
</nz-form-control>
<nz-form-label [nzSpan]="4" nzRequired>数据源</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="请选择数据源!">
<nz-select formControlName="datasourceType">
<nz-option nzLabel="属性数据" [nzValue]="'属性数据'"></nz-option>
<nz-option nzLabel="空间数据" [nzValue]="'空间数据'"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4"> 指标说明</nz-form-label>
<nz-form-control [nzSpan]="20">
<textarea nz-input formControlName="remark" rows="8"></textarea>
</nz-form-control>
</nz-form-item>
</form>
- Ts 结构
export class IndexCenterComponent implements OnInit {
constructor(private fb: FormBuilder) {}
validateForm: FormGroup;
ngOnInit() {
this.validateForm = this.fb.group({
code: [null, [Validators.required]],
name: [null, [Validators.required]],
datasourceType: [null, [Validators.required]],
remark: [null, []],
});
}
// 字段校验
submit() {
for (let key in this.validateForm.controls) {
this.validateForm.controls[key].markAsDirty();
this.validateForm.controls[key].updateValueAndValidity();
}
if (this.validateForm.valid) {
console.log(this.validateForm.value);
}
}
}
1、关于不能使用 ngModel
[ngModelOptions] = "{ standalone: true }";
例如:
<label
nz-checkbox
[ngModelOptions]="{ standalone: true }"
[ngModel]="item.checked"
[nzValue]="item.value"
>{{ item.label }}</label
>