fix(forms): introduce checkbox required validator

Closes #11459
Closes #13364

modules/@angular/forms/src/directives.ts

@@ -23,7 +23,7 @@ import {FormGroupDirective} from './directives/reactive_directives/form_group_di
 import {FormArrayName, FormGroupName} from './directives/reactive_directives/form_group_name';
 import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
 import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
-import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
+import {CheckboxRequiredValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
 
 export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
 export {ControlValueAccessor} from './directives/control_value_accessor';
@@ -42,13 +42,25 @@ export {FormGroupDirective} from './directives/reactive_directives/form_group_di
 export {FormArrayName, FormGroupName} from './directives/reactive_directives/form_group_name';
 export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
 export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
-export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
 
 export const SHARED_FORM_DIRECTIVES: Type<any>[] = [
-  NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
-  RangeValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor,
-  SelectMultipleControlValueAccessor, RadioControlValueAccessor, NgControlStatus,
-  NgControlStatusGroup, RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator
+  NgNovalidate,
+  NgSelectOption,
+  NgSelectMultipleOption,
+  DefaultValueAccessor,
+  NumberValueAccessor,
+  RangeValueAccessor,
+  CheckboxControlValueAccessor,
+  SelectControlValueAccessor,
+  SelectMultipleControlValueAccessor,
+  RadioControlValueAccessor,
+  NgControlStatus,
+  NgControlStatusGroup,
+  RequiredValidator,
+  MinLengthValidator,
+  MaxLengthValidator,
+  PatternValidator,
+  CheckboxRequiredValidator,
 ];
 
 export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] = [NgModel, NgModelGroup, NgForm];

modules/@angular/forms/src/directives/validators.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Directive, Input, OnChanges, SimpleChanges, forwardRef} from '@angular/core';
+import {Directive, Input, OnChanges, Provider, SimpleChanges, forwardRef} from '@angular/core';
 import {AbstractControl} from '../model';
 import {NG_VALIDATORS, Validators} from '../validators';
 
@@ -33,12 +33,18 @@ export interface Validator {
   registerOnValidatorChange?(fn: () => void): void;
 }
 
-export const REQUIRED_VALIDATOR: any = {
+export const REQUIRED_VALIDATOR: Provider = {
   provide: NG_VALIDATORS,
   useExisting: forwardRef(() => RequiredValidator),
   multi: true
 };
 
+export const CHECKBOX_REQUIRED_VALIDATOR: Provider = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => CheckboxRequiredValidator),
+  multi: true
+};
+
 /**
  * A Directive that adds the `required` validator to any controls marked with the
  * `required` attribute, via the {@link NG_VALIDATORS} binding.
@@ -52,7 +58,8 @@ export const REQUIRED_VALIDATOR: any = {
  * @stable
  */
 @Directive({
-  selector: '[required][formControlName],[required][formControl],[required][ngModel]',
+  selector:
+      ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]',
   providers: [REQUIRED_VALIDATOR],
   host: {'[attr.required]': 'required ? "" : null'}
 })
@@ -75,6 +82,30 @@ export class RequiredValidator implements Validator {
   registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
 }
 
+/**
+ * A Directive that adds the `required` validator to checkbox controls marked with the
+ * `required` attribute, via the {@link NG_VALIDATORS} binding.
+ *
+ * ### Example
+ *
+ * ```
+ * <input type="checkbox" name="active" ngModel required>
+ * ```
+ *
+ * @experimental
+ */
+@Directive({
+  selector:
+      'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]',
+  providers: [CHECKBOX_REQUIRED_VALIDATOR],
+  host: {'[attr.required]': 'required ? "" : null'}
+})
+export class CheckboxRequiredValidator extends RequiredValidator {
+  validate(c: AbstractControl): {[key: string]: any} {
+    return this.required ? Validators.requiredTrue(c) : null;
+  }
+}
+
 /**
  * @stable
  */

modules/@angular/forms/src/forms.ts

@@ -38,7 +38,7 @@ export {FormArrayName} from './directives/reactive_directives/form_group_name';
 export {FormGroupName} from './directives/reactive_directives/form_group_name';
 export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
 export {SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
-export {AsyncValidatorFn, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator, ValidatorFn} from './directives/validators';
+export {AsyncValidatorFn, CheckboxRequiredValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator, ValidatorFn} from './directives/validators';
 export {FormBuilder} from './form_builder';
 export {AbstractControl, FormArray, FormControl, FormGroup} from './model';
 export {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from './validators';

modules/@angular/forms/src/validators.ts

@@ -64,6 +64,13 @@ export class Validators {
     return isEmptyInputValue(control.value) ? {'required': true} : null;
   }
 
+  /**
+   * Validator that requires control value to be true.
+   */
+  static requiredTrue(control: AbstractControl): {[key: string]: boolean} {
+    return control.value === true ? null : {'required': true};
+  }
+
   /**
    * Validator that requires controls to have a value of a minimum length.
    */