title: form's custom "Multi-Parameter" validator does not always fire
body: <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>