title: Min and max range validation, validation error shown in both text fields instead of editing text box
body: <p>Min and max range validation: validation error showing in both text fields instead of editing text field, i have used reactive forms/formGroups in angular but i could not find a way to show error message only at editing test box </p>
  
  <p>i have tried using keyup event (though of finding editing input field0</p>
  
  <pre><code>class CrossFieldErrorMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
      return control.dirty &amp;&amp; form.invalid ;
    }
  }
  function validRange(lowerLimit: string, upperLimit: string) {
    return (group: FormGroup): { [key: string]: any } =&gt; {
      const lower = group.controls[lowerLimit];
      const upper = group.controls[upperLimit];
      if (upper.value === null || (upper.value &lt;= lower.value)) {
        return {
          invalidRangeUpper: false
        };
      }
      if (lower.value === null || (lower.value &gt;= upper.value)) {
        return {
          invalidRangeLower: false
        };
      }
      /*if (lower.value &gt;= upper.value) {
        return {
          invalidRangeUpper: true
        };
      }*/
    };
  }
  @Component({
    selector: 'app-dock-zone-row',
    templateUrl: './dock-zone-row.component.html',
    styleUrls: ['./dock-zone-row.component.scss']
  })
  export class DockZoneRowComponent implements OnInit {
    public rangeFormControl: FormGroup;
    public lowerLimitTouched: boolean;
    private invalidLowerTemp: boolean;
  
    constructor(private readonly a2Service: A2Service, private snackbar: MatSnackBar, private fb: FormBuilder) {
      this.lowerLimitTouched = false;
      this.rangeFormControl = this.fb.group({
        lowerLimit: new FormControl('', Validators.compose([
          Validators.required, Validators.max(99), Validators.min(0)
        ])),
        upperLimit: new FormControl('', Validators.compose([
          Validators.required, Validators.max(100), Validators.min(0)
        ]))
      }, {validator: validRange('lowerLimit', 'upperLimit')});
    }
  
  
  
  
  
   &lt;form class="form-inline" [formGroup]="rangeFormControl"&gt;
      &lt;mat-form-field &gt;
        &lt;input id="lower-limit" matInput min="0" max="99" formControlName="lowerLimit" type="number" name="lowerLimit" class="form-control"
               placeholder="Lower Threshold" [(ngModel)]="zoneConfig.lowerThresholdLimit" (keydown) ="inputChanged('lower')"
               [errorStateMatcher]="errorMatcher"&gt;
        &lt;mat-error *ngIf="rangeFormControl.controls.lowerLimit.hasError('required') || rangeFormControl.controls.lowerLimit.hasError('min')
        || rangeFormControl.controls.lowerLimit.hasError('max')|| rangeFormControl.hasError('invalidRangeLower') || invalidLowerTemp"&gt;
          Should be a value between &lt;strong&gt;0 &amp; 99 &lt;/strong&gt; and lesser than upper threshold
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field &gt;
        &lt;input id="upper-limit" matInput min="0" max="100" formControlName="upperLimit" type="number" class="form-control"
               placeholder="Upper Threshold" [(ngModel)]="zoneConfig.upperThresholdLimit" (keydown)="inputChanged('upper')"
               [errorStateMatcher]="errorMatcher" &gt;
        &lt;mat-error *ngIf="rangeFormControl.controls.upperLimit.hasError('required') ||rangeFormControl.controls.upperLimit.hasError('min')
        ||rangeFormControl.controls.upperLimit.hasError('max')||rangeFormControl.hasError('invalidRangeUpper')"&gt;
          Should be a value between &lt;strong&gt;1 and 100&lt;/strong&gt; and greater than lower threshold
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;button [disabled]="!rangeFormControl.valid" mat-icon-button *ngIf="!isBusy" (click)="save()"&gt;&lt;i class="material-icons"&gt;save&lt;/i&gt;&lt;/button&gt;
      &lt;mat-spinner *ngIf="isBusy" diameter="24"&gt;&lt;/mat-spinner&gt;
    &lt;/form&gt;
  </code></pre>