title: angular forms with multiple sync validators are valid despite it should be invalid
body: <p>I have 2 FormControls.</p>
  
  <p>When one of the controls value is greater/small than the value of the other control I get correct error validations written in my html and the form.valid is TRUE.</p>
  
  <pre><code>this.bestGradeScoresFormControl.setValidators(bestScoresGreaterThanWorstScoresValidator(this.worstGradeScoresFormControl), 
  Validators.max(100)]);
  this.worstGradeScoresFormControl.setValidators(worstScoresSmallerThanBestScoresValidator(this.bestGradeScoresFormControl));
  </code></pre>
  
  <p>Then I added the Validators.max(100) to the bestScores control using the Compose function:</p>
  
  <pre><code>this.bestGradeScoresFormControl.setValidators(Validators.compose(
  [bestScoresGreaterThanWorstScoresValidator(this.worstGradeScoresFormControl), Validators.max(100)]));
  this.worstGradeScoresFormControl.setValidators(worstScoresSmallerThanBestScoresValidator(this.bestGradeScoresFormControl));
  </code></pre>
  
  <p>When I set 101 scores for the best score control I get: 'More than 100 scores are not allowed' and the form.valid is FALSE, that is CORRECT!</p>
  
  <p>but...</p>
  
  <p>when I change now the worst scores control value to a valid one then the previous 'max error' suddenly disappers and the form.valid is TRUE, that is NOT CORRECT!</p>
  
  <p>Instead of using the Compose method I also tried using an array of validators like:</p>
  
  <pre><code>this.bestGradeScoresFormControl.setValidators([bestScoresGreaterThanWorstScoresValidator(this.worstGradeScoresFormControl), Validators.max(100)]);
    this.worstGradeScoresFormControl.setValidators(worstScoresSmallerThanBestScoresValidator(this.bestGradeScoresFormControl));
  </code></pre>
  
  <p>The behavior is the same ???</p>
  
  <p>What is wrong here? Why does changing the worstScore control value the form.valid value from FALSE to TRUE ?</p>
  
  <pre><code>export const bestScoresGreaterThanWorstScoresValidator = (worstScoreControl: FormControl): ValidatorFn =&gt; {
    return (control: FormControl): { [key: string]: boolean } =&gt; {
      if (control.value &gt; worstScoreControl.value) {
        worstScoreControl.setErrors(null);
        control.setErrors(null);
      }
      else {
        worstScoreControl.setErrors({ "bestScoresGreaterThanWorstScores": true });
        return { 'bestScoresGreaterThanWorstScores': true };
      }
    };
  }
  
  export const worstScoresSmallerThanBestScoresValidator = (bestScoreControl: FormControl): ValidatorFn =&gt; {
    return (control: FormControl): { [key: string]: boolean } =&gt; {
      if (control.value &lt; bestScoreControl.value) {
        bestScoreControl.setErrors(null);
        control.setErrors(null);
      }
      else {
        bestScoreControl.setErrors({ "worstScoresSmallerThanBestScores": true });
        return { 'worstScoresSmallerThanBestScores': true };
      }
    };
  }
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>I have put a plunkr here to show the problem:</p>
  
  <p><a href="https://plnkr.co/edit/ygiVNtPImkMveLGogTk2?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/ygiVNtPImkMveLGogTk2?p=preview</a></p>
  
  <p>In my opinion the solution can NOT be that I create a unique custom validator on the whole Form because I want all the custom validations have in its own validator class/function.</p>
  
  <p>If you make the solution basing on my plunkr code work, then the bounty is yours :-)</p>