Условная проверка в Angular

Question

Я хочу подтвердить возраст от и возраст, чтобы оценить здесь.

Правила:

Возраст от должен быть меньше возраста К. Возраст До должен быть больше возраста от

Угловая версия 6.0.7

Это определенная группа форм, есть и другие значения форм, здесь пропущены несущественные записи.

 myForm = new FormGroup({     
          'ageFrom': new FormControl( ),
          'ageTo': new FormControl(),

        });

Это кнопка поиска html должна быть отключена, если проверка не удалась и должно отображаться сообщение об ошибке

 <input type="number"  class="form-control" formControlName="ageFrom" >        
  <input type="number"  class="form-control"  formControlName="ageTo" >
 <button type="submit" class="btn btn-primary ripple" click)="search()">Search</button>        

Пробовал ли пользовательский валидатор, но сообщения не отображаются, и дайте мне знать, требуется ли для этого варианта использования специальный валидатор?

Пытались Угловой 6, ниже опция доступна

<input min="0" max="5">, но опять же они могут набрать любое число.

Answer 1

Template

<p style="color: red" *ngIf="myform.invalid">{{myform.errors | json}}</p>
<form [formGroup]="myform">
    <label>
        from:
        <input type="number" formControlName="from">
    </label>
    <label>
        to:
        <input type="number" formControlName="to">
    </label>
    <button type="submit" [disabled]="myform.invalid">go</button>
</form>

Контроллер

import { Component } from '@angular/core';
import { FormBuilder, AbstractControl, ValidationErrors } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    myform = this.builder.group({
        from: '',
        to: ''
    }, {
        validator: this.isValid
    });

    constructor(private builder: FormBuilder) {
    }

    isValid(c: AbstractControl): ValidationErrors {
        let diff = c.value.to - c.value.from;

        return (diff < 18)
            ? { 'young': 'must be 18 years or older' }
            : null;
    }
}