form's custom "Multi-Parameter" validator does not always fire
<p>I have an Angular2.0.0-beta.9 and Typescript 1.7 app.  In this app I am creating a custom validator that uses more than one supplied parameter to determine if a control is valid.</p>

<p>I am using <a href="https://stackoverflow.com/a/35461369/1854382">this answer</a> as inspiration</p>

<p>Here is the constructor of the class for my form:</p>

<pre><code>constructor(fBuilder: FormBuilder) {

// initialize shift custom validators
this._sVal = new ShiftValidator; // a custom validator class I import

// build form controls
this.shiftForm = fBuilder.group({
    'TradeDate': ['2016-03-23', Validators.required],
    // other fields removed for brevity
    'SupervisorRankID': [0, (c: Control) =&gt; this._sVal.valSelectOptional(c, this.requireSupervisor())]
  });
}
</code></pre>

<p>Here is the validator class:</p>

<pre><code>export class ShiftValidator {

// other validations removed for brevity
valSelectOptional(c: Control, required: boolean): { [s: string]: boolean } {
    if (Number(c.value) &lt; 1 &amp;&amp; required) {
        return { 'invalidSelection': true };
    }
  }
}
</code></pre>

<p>Here is the method / function I use to return the boolean value for the validator's second parameter:</p>

<pre><code>    requireSupervisor(): boolean {
    if (this.currentTrade === undefined) { return false; }
    \\ NOTE: currentTrade is a custom class / object that is imported into this module
    if (this.currentTrade !== undefined) {
        return this.currentTrade.SupervisorApproval;
    } else {
        return false;
    }
}
</code></pre>

<h2>The Problem</h2>

<p>This validator is only "firing" when the booelan value I pass is changed to true.  When I change the value of requireSupervisor to be false, the validator does not trigger.</p>

<h2>Question</h2>

<p>Can someone help me figure out why the validator does not trigger every time the value of its parameters change?</p>

<h2>EDIT 1:</h2>

<p>I tried gunter's approach by adding a (ngModelChange)='requireSupervisor' to the check box and changing the <strong>requireSupervisor</strong> function to include a updateValueAndValidate on the whole control group:</p>

<pre><code>    requireSupervisor(): boolean {
    if (this.currentTrade === undefined) {
        this.validateSupervisor();
        return false;
    }

    if (this.currentTrade !== undefined) {
        this.validateSupervisor();
        return this.currentTrade.SupervisorApproval;
    } else {
        this.validateSupervisor();
        return false;
    }
}

validateSupervisor(): void {
    if (this.shiftForm !== undefined) {
        this.shiftForm.updateValueAndValidity();
    }
}
</code></pre>

<p>If I change the above validateSupervisor function to the following I get a maximum call stack exceeded error:</p>

<pre><code>validateSupervisor(): void {
    if (this.shiftForm !== undefined) {
        this.shiftForm.controls['SupervisorRankID'].updateValueAndValidity();
    }
}
</code></pre>

<p><strong>PROBLEM</strong>:
The validator logic works, the problem is the validator logic is only triggered when the checkbox is clicked/selected.  When you uncheck/deselect the check box the validator is not triggered.  </p>

<p>Can someone help me figure out why the uncheck action of the check box does not fire the validator?</p>