需要选中一个复选框 [英] Requiring a checkbox to be checked
问题描述
我希望在使用 FormBuilder for Angular 选中复选框之前禁用按钮.我不想显式检查复选框的值,而是更喜欢使用验证器,以便我可以简单地检查 form.valid
.
在下面的两种验证情况下,复选框都是
interface ValidationResult {[键:字符串]:布尔值;}导出类 CheckboxValidator {静态检查(控制:控制){返回{检查":控制值};}}@成分({选择器:'我的表单',指令:[FORM_DIRECIVES],模板:` <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)"><input type="checkbox" id="cb" ngControl="cb"><button type="submit" [disabled]="!form.valid">`})导出类 SomeForm {regForm:控制组;构造函数(FB:FormBuilder){this.form = fb.group({cb: [ CheckboxValidator.checked ]//cb: [ false, Validators.required ] <-- 我也试过这个});}onSubmit(值:任何){console.log('提交:', this.form);}}
.ts
@Component({选择器:'我的应用',模板:`<h1>登录</h1><form [ngFormModel]="loginForm" #fm="ngForm" (submit)="doLogin($event)"><input type="checkbox" id="cb" ngControl="cb" #cb="ngForm" required><button type="submit" [disabled]="!loginForm.valid">登录</button><br/><div>Valid ={{cb.valid}}</div><div>Pristine ={{cb.pristine}}</div><div>Touch ={{cb.touched}}</div>form.valid?={{loginForm.valid}}<BR/><BR/></表单>`,指令:[ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES]})导出类登录{构造函数(FB:FormBuilder){this.loginForm = fb.group({cb: [假, Validators.required],//cb: ['',Validators.required] - 这也适用.});}doLogin(事件){console.log(this.loginForm);event.preventDefault();}}
如果需要任何更改,请告诉我.
I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don't want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check form.valid
.
In both validation cases below the checkbox is
interface ValidationResult {
[key:string]:boolean;
}
export class CheckboxValidator {
static checked(control:Control) {
return { "checked": control.value };
}
}
@Component({
selector: 'my-form',
directives: [FORM_DIRECTIVES],
template: ` <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
<input type="checkbox" id="cb" ngControl="cb">
<button type="submit" [disabled]="!form.valid">
</form>`
})
export class SomeForm {
regForm: ControlGroup;
constructor(fb: FormBuilder) {
this.form = fb.group({
cb: [ CheckboxValidator.checked ]
//cb: [ false, Validators.required ] <-- I have also tried this
});
}
onSubmit(value: any) {
console.log('Submitted: ', this.form);
}
}
.ts
@Component({
selector: 'my-app',
template: `
<h1>LOGIN</h1>
<form [ngFormModel]="loginForm" #fm="ngForm" (submit)="doLogin($event)">
<input type="checkbox" id="cb" ngControl="cb" #cb="ngForm" required>
<button type="submit" [disabled]="!loginForm.valid">Log in</button>
<br/>
<div>Valid ={{cb.valid}}</div>
<div>Pristine ={{cb.pristine}}</div>
<div>Touch ={{cb.touched}}</div>
<div>form.valid?={{loginForm.valid}}</div>
<BR/>
<BR/>
</form>
`,
directives: [ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES]
})
export class Login {
constructor(fb: FormBuilder) {
this.loginForm = fb.group({
cb: [false, Validators.required],
//cb: ['',Validators.required] - this will also work.
});
}
doLogin(event) {
console.log(this.loginForm);
event.preventDefault();
}
}
Please let me know if any changes required.
这篇关于需要选中一个复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!