Quiero que se deshabilite un botón hasta que se marque una casilla de verificación con un FormBuilder para Angular. No quiero marcar explícitamente el valor de la casilla de verificación y preferiría usar un validador para poder simplemente marcar form.valid .
En ambos casos de validación a continuación, la casilla de verificación es
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); } }Desde Angular 2.3.1 puedes usar Validators#requiredTrue :
Componente:
this.formGroup = this.formBuilder.group({ cb: [false, Validators.requiredTrue] });Modelo:
<form [formGroup]="formGroup"> <label><input type="checkbox" formControlName="cb"> Accept it</label> <div style="color: red; padding-top: 0.2rem" *ngIf="formGroup.hasError('required', 'cb')"> Required </div> <hr> <div> <button type="submit" [disabled]="formGroup.invalid">Submit</button> </div> </form>Simplemente podría usar un ValidatorPattern y verificar el valor correcto (booleano):
<input type="checkbox" [formControl]="myForm.controls['isTosRead']">y aquí está el enlace:
this.myForm = builder.group({ isTosRead: [false, Validators.pattern('true')] });<h1>LOGIN</h1> <form [formGroup]="signUpForm"> <input type="checkbox" formControlName="cb"> <button type="submit" [disabled]="!loginForm.valid" (click)="doLogin()">Log in</button> </form> export class Login { public signUpForm: FormGroup; constructor(fb: FormBuilder) { this.signUpForm = fb.group({ cb: [false, Validators.requiredTrue] }); } doLogin() { } }