Как проверить, имеют ли два разных дочерних раскрывающихся списка одинаковое значение в Angular 7?

Question

У меня есть два разных раскрывающихся списка (реализованных как компоненты cihld) с одинаковыми данными внутри.

Я хочу отобразить mat-error, если эти два выбранных значения одинаковы.На теге mat-error я вызываю функцию:

areValuesTheSame() {
  if (this.form.controls['value1'].value && this.form.controls['value2'].value) {
      return this.form.controls['value1'].value === this.form.controls['value2'].value;
}

Я думал, что получу результат true / false, и в соответствии с этим в mat-error я сделаю так:

<mat-error *ngIf="areValuesTheSame()">Selected values has to be the same!</mat-error>

Но дело в том, что он постоянно возвращает значения для меня, а не возвращает его один раз (истина или ложь).

Если я пытаюсь проверить это в console.log,консоль печатает результат n раз (как бесконечный цикл).

Что я здесь не так делаю?

Answer 1

На самом деле нет ничего плохого в вашем коде.Это как работает Angular.Он запускает обнаружение изменений автоматически, а когда изменения проверяются, он запускает вашу функцию.

Проверьте это: angular2 - бесконечный цикл, когда я вызываю метод из класса Angular 2 внутри шаблона

Answer 2

Ваша функция вызывается при каждом цикле обнаружения изменений, чтобы избежать такого поведения, поместите логическое значение в ваш * ngIf и измените его при изменении значения ваших значений1 и значения2, например, при событии (keyup)

<input formControlName="value1" (keyup)="areSame()" />
<input formControlName="value2" (keyup)="areSame()" />
<mat-error *ngIf="!sameBool">Selected values has to be the same!</mat-error>

TS:

areSame(){
 if(this.form.controls['value1'].value === this.form.controls['value2'].value)
   sameBool= true;
}

РЕДАКТИРОВАТЬ: использование валидаторов, как указано в комментариях, еще лучше.