title: Compare the values of 2 input fields to validate the form in Angular 7 through the template
body: <p>I'm in my first weeks of moving to Angular 7, I've been doing basic forms in my project using template based basic validations, but I need to validate the form now based on that the value of one field must be higher than the other</p>
  
  <p>I've tried using the values themselves in the component controller, but while I'm able to confirm that the values are valid or not, I'm unable to show the user what the problem is, using this code </p>
  
  <pre><code>if (issueThresholdForm.value.lowScore &gt; issueThresholdForm.value.highScore) {
    // Show user error
    // This is the messing part, I guess
  }
  </code></pre>
  
  <p>Here's the template that I'm using</p>
  
  <pre><code>&lt;div *ngIf="_issueCategory"&gt;
    &lt;form (submit)="submitIssueThreshold(issueThresholdForm)" #issueThresholdForm="ngForm"&gt;
      &lt;mat-form-field class="half-width" floatLabel="always"&gt;
        &lt;mat-label [translate]="'issueThreshold.modals.highScore'"&gt;&lt;/mat-label&gt;
        &lt;input name="highScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.highScore"
          required #highScore="ngModel"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="half-width" floatLabel="always"&gt;
        &lt;mat-label [translate]="'issueThreshold.modals.lowScore'"&gt;&lt;/mat-label&gt;
        &lt;input name="lowScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.lowScore"
          required #lowScore="ngModel"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="full-width" floatLabel="always"&gt;
        &lt;mat-label [translate]="'issueThreshold.modals.description'"&gt;&lt;/mat-label&gt;
        &lt;textarea name="description" matInput [(ngModel)]="_issueCategory.thresholdDescription"&gt;
              &lt;/textarea&gt;
      &lt;/mat-form-field&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-secondary" data-dismiss="modal" [translate]="'modal-confirm.cancel'"&gt;&lt;/button&gt;
        &lt;button type="submit" class="btn btn-primary primary" [disabled]="issueThresholdForm.invalid || issueThresholdForm.pristine" [translate]="'modal-confirm.submit'"&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>