我正在用FormBuilder & ngFormModel构建Angular2的表单,并且无法找到验证复选框组中的1个或多个复选框的优雅方式。我不想编写一个自定义组件方法来验证我使用它们的任何地方的复选框组。理想情况下,利用FormBuilder & Validator.ququired或甚至自定义验证器来利用ngFormModel会很好。Angular2:最好的方式来使用FormBuilder Validators.required与复选框组
1
A
回答
5
您需要定义一组为您的复选框,并指定一组验证:
this.myForm = this.builder.group({
'checkboxes': fb.group({
checkbox1: [ '' ],
checkbox1: [ '' ]
}, {validator: this.checkboxRequired})
});
和验证:
checkboxRequired(group: ControlGroup) {
var valid = false;
for (name in group.controls) {
var val = group.controls[name].value;
if (val) {
valid = true;
break;
}
}
if (valid) {
return null;
}
return {
checkboxRequired: true
};
}
您可以用表格这种方式链接此:
<form [ngFormModel]="myForm">
Checkbox1: <input type="checkbox"
[ngFormControl]="myForm.controls.checkboxes.controls.checkbox1"/>
Checkbox2: <input type="checkbox"
[ngFormControl]="myForm.controls.checkboxes.controls.checkbox2"/>
</form>
查看此问题以了解更多详情:
你可以提高验证码借力Validators.required
:
checkboxRequired(group: ControlGroup) {
var valid = false;
for (name in group.controls) {
var check = Validators.required(group.controls[name]);
if (!check) {
valid = true;
break;
}
}
if (valid) {
return null;
}
return {
checkboxRequired: true
};
}
0
由于API已经略有改变。以下答案稍微刷新一下。这是有意的有点冗长
this.myForm = this._fb.group({
myName: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
role: new FormGroup({
prog: new FormControl(null),
mgr: new FormControl(null),
designer: new FormControl(null),
}, this.CheckGroupValidation)
});
的验证功能:
private CheckGroupValidation(group:FormGroup)
{
var valid = false;
var control_name:any;
for (control_name in group.controls)
{
var check = group.controls[control_name].value;
if (check) { valid = true; break; }
}
if (valid) { return null;}
return { CheckGroupValidation: true}; // not qualified
}
模板文件
<form [formGroup]="myForm" novalidate (ngSubmit)="save()" >
<ion-list>
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text" value="" formControlName="myName" ></ion-input>
</ion-item>
</ion-list>
<ion-list formGroupName="role">
<ion-item>
<ion-label>Programmer</ion-label>
<ion-checkbox color="dark" checked="true" formControlName="prog" ></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Manager</ion-label>
<ion-checkbox color="dark" checked="false" formControlName="mgr"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Designer</ion-label>
<ion-checkbox color="dark" checked="false" formControlName="designer"></ion-checkbox>
</ion-item>
</ion-list>
<button type="submit"
[disabled] = "!myForm.valid"
[hidden]= "isProcessing"
ion-button full style="margin-top:0px;" >Submit</button>
</form>
相关问题
- 1. Angular2:禁用formbuilder的元素
- 2. Angular2树复选框与EventEmitter
- 3. angular2 formbuilder多嵌套formGroupName
- 4. 最好的方式来使用PHP
- 5. Angular2:在formbuilder中订阅valuechanges
- 6. SCSS - 最好的方式来组织
- 7. angular2 formBuilder组导致PARAMS
- 8. 使用复选框来控制NSTableView的选择的最佳方式是什么?
- 9. Flex的自定义组件,最好的方式来使用它
- 10. 使用FormBuilder
- 11. 最好的方式来分享Cookie与API来验证用户
- 12. Angular2 Formbuilder - 引用FormArray元素
- 13. 使用复选框的最佳方式 - IOS swift
- 14. 组合框与复选框
- 15. 使用formbuilder是否很好?
- 16. 创建专属复选框组的最佳方式QML
- 17. 动态的方式来使用复选框
- 18. Xcode最好的方式来重复使用多种形式的区域/视图
- 19. 有没有更好的方法来禁用复选框?
- 20. 飞镖Angular2 - 使用复选框值
- 21. Angular 2 FormBuilder禁用复选框上的字段选择
- 22. Angular2动态组件的最佳方式
- 23. Angular2 RC1最好的方法来实现加载指标
- 24. 将Angular2 FormBuilder与API提取的数据结合起来
- 25. 最好和最安全的方式来回显结果与pdo
- 26. 什么是最好的方式来使用C#与MySQL不使用odbc
- 27. 最好的方式来描述在SQL
- 28. 使用formbuilder在组合框中选择默认值
- 29. SWT TreeViewer与组合框和复选框
- 30. 哪个传递动态创建的复选框和组框的最佳方式