Repository: angular
Issue: A required checkbox (within custom component) should always set its host to 'invalid' if unchecked
Labels: feature,freq2: medium,area: forms,feature: under consideration,feature: votes required

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MIGHT BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a ...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (behavior that used to work and stopped working in a new release)
[x] Bug report <!-- Please search github for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
Some months ago an issue related to required checkbox validation had been fixed and it now works as expected. See here: #11459

Unfortunately, the issue still occurs when placing the checkbox input within a custom component. 

**Form template:**
```
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
    // variable 'checkboxValue: boolean' comes from controller
    <my-checkbox name="myCheckbox" [(ngModel)]="checkboxValue" required></my-checkbox> // --> always ng-valid
    <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

Output: {{myForm.valid}} // BAD: output always true
```

**Component:**
```
@Component({
    selector: "my-checkbox",
    template: '<input [(ngModel)]="value" [attr.name]="name" [attr.id]="name" type="checkbox" [required]="required"/>',
    providers: [
        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyCheckbox), multi: true }
    ]
})
export class MyCheckbox implements ControlValueAccessor {
    @Input("name") name: string;
    @Input("required") required: boolean;
    private _innerValue: any;

    onChangeCallback: any = (_: any) => {};
    onTouchedCallback: any = () => {};

    get value(): any {
        return this._innerValue;
    };

    set value(value: any) {
        if (value !== this._innerValue) {
            this._innerValue = value;
            this.onChangeCallback(value);
        }
    }

    writeValue(value: any): void {
        if (value !== this._innerValue) {
            this._innerValue = value;
        }
    }

    registerOnChange(fn: (_: any) => {}): void { this.onChangeCallback = fn; }
    registerOnTouched(fn: () => {}): void { this.onTouchedCallback = fn; }
}
```
In that case, the validation state is NOT propagated properly to the host component. Thus, the enclosing form always remains valid even if unchecking the required checkbox. Like with the older issue, only setting ngModel to NULL would trigger correct propagation (not a desired approach).


## Expected behavior
A required checkbox validation state (ng-valid, ng-invalid) should be propagated properly to the host component. Unchecking the inner checkbox (then ngModel == false) makes host component and form invalid.


<!--
## Minimal reproduction of the problem with instructions
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

## What is the motivation / use case for changing the behavior?

Unchecking a required checkbox within a custom component should prevent the form submission. 


## Please tell us about your environment

Angular version: 4.1.0
Browser: [all]
Language: [all]