需要选中复选框

我想要一个按钮被禁用，直到一个复选框已被选中使用的形式生成器的角度。我不想显式地选中复选框的值，而是希望使用验证器，这样我就可以简单地选中 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);
}
}
105901 次浏览
小开
最佳答案

. 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();
}
}

工作的普朗克 。

如果需要更改，请告诉我。

小开

我发现对于复选框，Validator.义务不能正常工作。 如果您选中了一个复选框，然后取消选中它，即使它没有被选中，FormControl 仍然会显示它是有效的。我认为它只检查你设置的东西，是真的还是假的。

下面是一个可以添加到 FormControl 的简单快速验证器:

  mustBeChecked(control: FormControl): {[key: string]: string} {
if (!control.value) {
return {mustBeCheckedError: 'Must be checked'};
} else {
return null;
}
}
小开

你可以使用一个 ValidatorPattern 并检查正确的(布尔值)值:

<input type="checkbox" [formControl]="myForm.controls['isTosRead']">

这就是约束力:

this.myForm = builder.group({
isTosRead: [false, Validators.pattern('true')]
});
小开

我有个很简单的例子:

在您的组件中:

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>
小开

由于 角度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>

STACKBLITZ DEMO

小开 
<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() {


}
}
小开

对于角度8，我像下面一样检查三个复选框中是否至少有一个复选框被选中

form = new FormGroup({
// ...more form controls...
myCheckboxGroup: new FormGroup({
myCheckbox1: new FormControl(false),
myCheckbox2: new FormControl(false),
myCheckbox3: new FormControl(false),
}, requireCheckboxesToBeCheckedValidator()),
// ...more form controls...
});

创建了一个自定义验证器

import { FormGroup, ValidatorFn } from '@angular/forms';


export function requireCheckboxesToBeCheckedValidator(minRequired = 1): ValidatorFn {
return function validate (formGroup: FormGroup) {
let checked = 0;


Object.keys(formGroup.controls).forEach(key => {
const control = formGroup.controls[key];


if (control.value === true) {
checked ++;
}
});


if (checked < minRequired) {
return {
requireCheckboxesToBeChecked: true,
};
}


return null;
};
}

并像下面这样在 html 中使用它

<ng-container [formGroup]="form">
<!-- ...more form controls... -->


<div class="form-group" formGroupName="myCheckboxGroup">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" formControlName="myCheckbox1" id="myCheckbox1">
<label class="custom-control-label" for="myCheckbox1">Check</label>
</div>


<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" formControlName="myCheckbox2" id="myCheckbox2">
<label class="custom-control-label" for="myCheckbox2">At least</label>
</div>


<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" formControlName="myCheckbox3" id="myCheckbox3">
<label class="custom-control-label" for="myCheckbox3">One</label>
</div>


<div class="invalid-feedback" *ngIf="form.controls['myCheckboxGroup'].errors && form.controls['myCheckboxGroup'].errors.requireCheckboxesToBeChecked">At least one checkbox is required to check</div>
</div>


<!-- ...more form controls... -->
</ng-container>
小开

创建一个检测任何更改的方法

checkValue(event: any) {
this.formulario.patchValue({
checkboxControlName: event.target.checked
})
}

将该方法放在事件更改和 ngModel required属性上

<input (change)="checkValue($event)" type="checkbox" formControlName="checkboxControlName" value="true" ngModel required>

并用传统的方法进行验证

this.formulario = new FormGroup({
checkboxControlName: new FormControl('', [Validators.required])
});

来源

小开

如果你正在使用 PrimeNG，你可以通过一个 TAG app-form-need-field 来完成，如下所示:

<p-checkbox name="_yes" #active="ngModel" required value="true"
label="Active" binary="true" [(ngModel)]="filter._yes"></p-checkbox>


<p-checkbox name="_no" #inactive="ngModel" required label="Inactive"
binary="true" [(ngModel)]="filter._no"></p-checkbox>


<app-form-required-field
*ngIf="!filter._yes && !filter._no"
[form]="active"
[form]="inactive"
id="msgAtivo"
requiredMessage="Field required!"
>
</app-form-required-field>
小开

HTML 表格

<div class="col-md-12">
<div class="form-group">
<input type="checkbox" class="form-check-input" id="agree" formControlName="agree">
<label class="form-check-label" for="agree">
I agree to our <a target="_blank" href="#">Terms of use</a> and
<a target="_blank" href="#">Privacy Policy</a>.
</label>
<div class="text-danger" *ngIf="(isRegSubmit||regForm.get('agree').touched) &&
regForm.get('agree').hasError('required')">
Please agree to terms of use and privacy policy.
</div>
</div>
</div>

TS 档案

  regForm: FormGroup;isRegSubmit: boolean = false;
constructor(
private fb: FormBuilder
}


this.regForm = this.fb.group({
agree    : [false, Validators.requiredTrue]
});

验证器，要求无效 此外，我们也可以通过检查值来显示错误消息，并限制用户提交，但这不是一个好的方法，因为我们没有使用验证，所以每当只有一个复选框时，就添加 Validators.requdTrue，而不是 Validators.need

小开

尽管把验证器简单的检查下面的条件

@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 && !cb.value">
</form>`
})
小开

成分:

import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';


public profileForm!: FormGroup;


constructor(
private _fb: FormBuilder
) { }
  

ngOnInit(): void {
this._createForm();
this._setValidationRule();
}


get fc(): { [key: string]: AbstractControl } {
return this.profileForm.controls;
}


private _createForm() {
const self = this;
self.profileForm = self._fb.group({
required_checkbox: [false],
zipcode: [''],
city: [''],
town: [''],
});
}
  

private _setValidationRule() {
const self = this;
self.profileForm.get('required_checkbox').valueChanges.subscribe(
ruleStatus => {
if (ruleStatus) {
self.profileForm.get('zipcode').setValidators(Validators.required);
self.profileForm.get('city').setValidators(Validators.required);
self.profileForm.get('town').setValidators(Validators.required);
} else {
self.profileForm.get('zipcode').setValidators(null);
self.profileForm.get('city').setValidators(null);
self.profileForm.get('town').setValidators(null);
}
self.profileForm.get('zipcode').updateValueAndValidity();
self.profileForm.get('city').updateValueAndValidity();
self.profileForm.get('town').updateValueAndValidity();
});
}

模板

<mat-checkbox class="terms" formControlName="required_checkbox">Pickup Riraku</mat-checkbox>
        

<mat-form-field appearance="outline">
<mat-label>Zip Code</mat-label>
<input matInput type="text" formControlName="zipcode" placeholder="">
</mat-form-field>


<mat-form-field appearance="outline">
<mat-label>City</mat-label>
<input matInput type="text" formControlName="city" placeholder="">
</mat-form-field>


<mat-form-field appearance="outline">
<mat-label>Town</mat-label>
<input matInput type="text" formControlName="town" placeholder="">
</mat-form-field>
小开

要在复选框中设置值，复选框本身可以有一个值，也可以没有。因此，您可以在 Validators.required上进行测试，并在选中时传递值或 true，在未选中时传递 null 或 false。 并触发 onChangeInput 方法: < input type = “ checkbox”(change) = “ changeInput ($event)”> 

public changeInput(event): void {
this.isChecked = event.target.checked;
// passing the value
this.onChange(this.isChecked ? (this.value ? this.value : true) : false);
// set touched
if (!this.isTouched) {
this.isTouched = true;
this.onTouch();
}
}


提交答案