我想要一个按钮被禁用,直到使用FormBuilder for Angular检查复选框。我不想明确检查复选框的值,并且更愿意使用验证器,以便我可以简单地检查form.valid
。
在下面的两个验证案例中,复选框都是
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();
}
}
如果需要更改,请告诉我。
您可以使用ValidatorPattern并检查右(布尔)值:
<input type="checkbox" [formControl]="myForm.controls['isTosRead']">
这是绑定:
this.myForm = builder.group({
isTosRead: [false, Validators.pattern('true')]
});
从Angular 2.3.1你可以使用Validators#requiredTrue
:
零件:
this.formGroup = this.formBuilder.group({
cb: [false, Validators.requiredTrue]
});
模板:
<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>
我发现Validator.required对复选框无法正常工作。如果选中一个复选框然后取消选中它,即使取消选中,FormControl仍会将其显示为有效。我认为它只会检查你是否将它设置为某种东西,无论是真还是假。
这是一个可以添加到FormControl的快速简单验证器:
mustBeChecked(control: FormControl): {[key: string]: string} {
if (!control.value) {
return {mustBeCheckedError: 'Must be checked'};
} else {
return null;
}
}
<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() {
}
}
这在Angular版本2.3.0中得到了解决。
只需使用:Validators.requiredTrue instead of Validators.required
。
我有这个非常简单的例子:
在您的组件中:
login : FormGroup;
constructor(@Inject(FormBuilder)formBuilder : FormBuilder) {
this.login = formBuilder.group({userName: [null], password: [null],
staySignedIn: [false,Validators.pattern('true')]});
}
在您的HTML中:
<form [formGroup]="login" (ngSubmit)="onSubmit()">
<div class="form-group">
<input formControlName="userName" required>
</div>
<div class="form-group">
<input formControlName="password" type="password" required>
</div>
<div>
<label>
<input formControlName="staySignedIn" checked="staySignedIn" type="checkbox"> bla
</label>
</div>
<button type="submit">bla</button>
<div >
<a href>bla?</a>
</div>
</form>