fix(forms): introduce checkbox required validator

Closes #11459
Closes #13364

modules/@angular/forms/test/reactive_integration_spec.ts

@@ -39,7 +39,8 @@ export function main() {
           ValidationBindingsForm,
           UniqLoginValidator,
           UniqLoginWrapper,
-          NestedFormGroupComp
+          NestedFormGroupComp,
+          FormControlCheckboxRequiredValidator,
         ]
       });
     });
@@ -1311,6 +1312,24 @@ export function main() {
     });
 
     describe('validations', () => {
+      it('required validator should validate checkbox', () => {
+        const fixture = TestBed.createComponent(FormControlCheckboxRequiredValidator);
+        const control = new FormControl(false, Validators.requiredTrue);
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        const checkbox = fixture.debugElement.query(By.css('input'));
+        expect(checkbox.nativeElement.checked).toBe(false);
+        expect(control.hasError('required')).toEqual(true);
+
+        checkbox.nativeElement.checked = true;
+        dispatchEvent(checkbox.nativeElement, 'change');
+        fixture.detectChanges();
+
+        expect(checkbox.nativeElement.checked).toBe(true);
+        expect(control.hasError('required')).toEqual(false);
+      });
+
       it('should use sync validators defined in html', () => {
         const fixture = TestBed.createComponent(LoginIsEmptyWrapper);
         const form = new FormGroup({
@@ -2052,6 +2071,14 @@ class ValidationBindingsForm {
   pattern: string;
 }
 
+@Component({
+  selector: 'form-control-checkbox-validator',
+  template: `<input type="checkbox" [formControl]="control">`
+})
+class FormControlCheckboxRequiredValidator {
+  control: FormControl;
+}
+
 @Component({
   selector: 'uniq-login-wrapper',
   template: `

modules/@angular/forms/test/template_integration_spec.ts

@@ -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]
       });
@@ -808,6 +823,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;
@@ -1274,6 +1325,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: [

modules/@angular/forms/test/validators_spec.ts

@@ -50,6 +50,14 @@ export function main() {
          () => { expect(Validators.required(new FormControl(0))).toBeNull(); });
     });
 
+    describe('requiredTrue', () => {
+      it('should error on false',
+         () => expect(Validators.requiredTrue(new FormControl(false))).toEqual({'required': true}));
+
+      it('should not error on true',
+         () => expect(Validators.requiredTrue(new FormControl(true))).toBeNull());
+    });
+
     describe('minLength', () => {
       it('should not error on an empty string',
          () => { expect(Validators.minLength(2)(new FormControl(''))).toBeNull(); });