fix(forms): introduce checkbox required validator
Closes #11459 Closes #13364
This commit is contained in:

committed by
Victor Berchet

parent
7b0a86718c
commit
2bf1bbc071
@ -19,11 +19,26 @@ export function main() {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
StandaloneNgModel, NgModelForm, NgModelGroupForm, NgModelValidBinding, NgModelNgIfForm,
|
||||
NgModelRadioForm, NgModelRangeForm, NgModelSelectForm, NgNoFormComp, InvalidNgModelNoName,
|
||||
NgModelOptionsStandalone, NgModelCustomComp, NgModelCustomWrapper,
|
||||
NgModelValidationBindings, NgModelMultipleValidators, NgAsyncValidator,
|
||||
NgModelAsyncValidation, NgModelSelectMultipleForm, NgModelSelectWithNullForm
|
||||
StandaloneNgModel,
|
||||
NgModelForm,
|
||||
NgModelGroupForm,
|
||||
NgModelValidBinding,
|
||||
NgModelNgIfForm,
|
||||
NgModelRadioForm,
|
||||
NgModelRangeForm,
|
||||
NgModelSelectForm,
|
||||
NgNoFormComp,
|
||||
InvalidNgModelNoName,
|
||||
NgModelOptionsStandalone,
|
||||
NgModelCustomComp,
|
||||
NgModelCustomWrapper,
|
||||
NgModelValidationBindings,
|
||||
NgModelMultipleValidators,
|
||||
NgAsyncValidator,
|
||||
NgModelAsyncValidation,
|
||||
NgModelSelectMultipleForm,
|
||||
NgModelSelectWithNullForm,
|
||||
NgModelCheckboxRequiredValidator,
|
||||
],
|
||||
imports: [FormsModule]
|
||||
});
|
||||
@ -825,6 +840,42 @@ export function main() {
|
||||
|
||||
describe('validation directives', () => {
|
||||
|
||||
it('required validator should validate checkbox', fakeAsync(() => {
|
||||
const fixture = TestBed.createComponent(NgModelCheckboxRequiredValidator);
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const control =
|
||||
fixture.debugElement.children[0].injector.get(NgForm).control.get('checkbox');
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.checked).toBe(false);
|
||||
expect(control.hasError('required')).toBe(false);
|
||||
|
||||
fixture.componentInstance.required = true;
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(input.nativeElement.checked).toBe(false);
|
||||
expect(control.hasError('required')).toBe(true);
|
||||
|
||||
input.nativeElement.checked = true;
|
||||
dispatchEvent(input.nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(input.nativeElement.checked).toBe(true);
|
||||
expect(control.hasError('required')).toBe(false);
|
||||
|
||||
input.nativeElement.checked = false;
|
||||
dispatchEvent(input.nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(input.nativeElement.checked).toBe(false);
|
||||
expect(control.hasError('required')).toBe(true);
|
||||
}));
|
||||
|
||||
it('should support dir validators using bindings', fakeAsync(() => {
|
||||
const fixture = TestBed.createComponent(NgModelValidationBindings);
|
||||
fixture.componentInstance.required = true;
|
||||
@ -1291,6 +1342,16 @@ class NgModelMultipleValidators {
|
||||
pattern: string|RegExp;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-checkbox-validator',
|
||||
template:
|
||||
`<form><input type="checkbox" [(ngModel)]="accepted" [required]="required" name="checkbox"></form>`
|
||||
})
|
||||
class NgModelCheckboxRequiredValidator {
|
||||
accepted: boolean = false;
|
||||
required: boolean = false;
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ng-async-validator]',
|
||||
providers: [
|
||||
|
Reference in New Issue
Block a user