Сравните значения двух полей ввода, чтобы проверить форму в Angular 7 через шаблон.

ИЗМЕНИТЬ:

Отредактировано тем же решением реактивным способом. Поэтому создайте группу форм и добавьте собственный валидатор, прикрепленный к группе форм:

_issueCategory = { lowScore: 1, highScore: 2 };

issueThresholdForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.issueThresholdForm = this.fb.group({
    highScore: [this._issueCategory.highScore, [Validators.required]],
    lowScore: [this._issueCategory.lowScore, [Validators.required]]
  }, { validators: validateScore })
}

Функция валидатора:

export function validateScore(
  control: AbstractControl
): ValidationErrors | null {
  if (control && control.get("highScore") && control.get("lowScore")) {
    const highscore = control.get("highScore").value;
    const lowscore = control.get("lowScore").value;  
    return (lowscore > highscore) ? { scoreError: true } : null
  }
  return null;
}

Затем вы можете удалить ngModel (важно!), так как их нельзя смешивать с реактивными формами. Также вы можете удалить все проверки, такие как required для формы, поэтому в конце ввод может выглядеть просто так:

<input type="number" matInput placeholder="0" formControlName="lowScore">

STACKBLITZ

ОРИГИНАЛ:

Я настоятельно, настоятельно предлагаю реактивные формы , поначалу они могут показаться запутанными, но оно того стоит. У вас есть лучший контроль над формой, и, как упоминалось в комментарии Нитина Кумара Билии, модульное тестирование проще.

Что, как говорится....

Вот решение, использующее форму, управляемую шаблоном, поскольку это то, что вы сейчас используете.

Вы можете сделать директиву, которую вы прикрепите к тегу формы, и внутри этой директивы будет валидатор для сравнения значений highscore и lowscore и прикрепления ошибки к форме или возврата null (что считается действительным в формах). Таким образом, валидатор будет выглядеть так:

import { Directive } from "@angular/core";
import {
  AbstractControl,
  NG_VALIDATORS,
  Validator,
  ValidationErrors
} from "@angular/forms";

@Directive({
  selector: "[scoreValidation]",
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ScoreValidatorDirective,
      multi: true
    }
  ]
})
export class ScoreValidatorDirective implements Validator {
  constructor() {}

  // here control is the formgroup
  validate(control: AbstractControl): ValidationErrors | null {
    if (control && control.get("highScore") && control.get("lowScore")) {

      // the form controls and their value
      const highscore = control.get("highScore").value;
      const lowscore = control.get("lowScore").value;

      // not valid, return an error
      if (lowscore > highscore) {
        return { scoreError: true };
      }
      // valid
      return null;
    }
    // form controls do not exist yet, return null
    return null;
  }
}

Добавьте директиву в массив объявлений в вашем модуле приложения и используйте ее, просто прикрепив эту директиву к тегу формы:

<form .... scoreValidation>

и ошибка может быть показана с помощью *ngIf="issueThresholdForm.hasError('scoreError')

STACKBLITZ

Я настоятельно рекомендую реактивные формы, но если вы хотите сделать это, вы можете:

поместите следующее p tag под вход lowScore:

<p class="text-danger" [hidden]="(lowerScore.value > higerScore.value ? false: true) || (lowScore.pristine && !issueThresholdForm.submitted)">
                    The lower scrore can not be greater than higer score
</p>

Вы можете использовать Custom Validations в Reactive Forms следующим образом.

HTML

<div>
  <form [formGroup]="myForm">

    <label>Low Score: </label>
    <input formControlName="lowScore" type="number">
    <br/><br/>
    <label>High Score: </label>
    <input formControlName="highScore" type="number">

    <div>
      <span style="color: red" *ngIf="myForm.get('highScore').touched && myForm.get('highScore').hasError('higherThan')">High score should be higher than lower score.</span>
    </div>

  </form>
</div>

ТС

export class AppComponent  {
  myForm: FormGroup;

  constructor() {

    this.myForm = new FormGroup({
      highScore: new FormControl(0, [this.lowerThan('lowScore')]),
      lowScore: new FormControl(0, null)
    });
  }
  lowerThan(field_name): ValidatorFn {

    return (control: AbstractControl): { [key: string]: any } => {

      const input = control.value;

      const isLower = control.root.value[field_name] >= input;

      return isLower ? {'lowerThan': {isLower}}: null;
    };
  }
}

Найдите рабочий StackBlitz здесь.