Как проверить, что ввод пользователя меньше максимального значения в Angular 2

Question

Я хочу создать фильтр диапазона в Angular. Пользователь не должен иметь возможность вводить минимальное значение, которое меньше максимального входного значения.

HTML:

<input type="text" class="form-control" formControlName="from" [placeholder]="Minimum" />

<input type="text" class="form-control" formControlName="to" [placeholder]="Maximum" />

Я не уверен, что делать. Думаю, мне нужно создать две переменные в .ts-файле (minValue и maxValue). А затем проверьте непосредственно в HTML с помощью * ngIf, если minValue меньше maxValue, а затем отправьте сообщение об ошибке.

Кто-нибудь знает, как решить эту проблему? Большое спасибо

Answer 1

Вам необходимо установить Валидатор при изменении "from" formControl

Попробуйте вот так:

ngOnInit() {
    ...
    this.contactForm.get("from").valueChanges.subscribe(val => {
      this.contactForm.get("to").setValidators(Validators.min(val));
    });
}

Рабочая демонстрация

Answer 2

Вы можете попробовать, как показано ниже

компонент. html

<form [formGroup]="frmGrp">
    <input type="number" formControlName="fromValue" [min]="toCtrl.value" [value]="getMinValue()">
    <input type="number" formControlName="toValue">
</form>

Component.ts

export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  frmGrp: FormGroup;
  fromCtrl: AbstractControl;
  toCtrl: AbstractControl;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.frmGrp = this.fb.group({
      fromValue: [0],
      toValue: [0]
    });

    this.fromCtrl = this.frmGrp.get('fromValue') as FormControl;
    this.toCtrl = this.frmGrp.get('toValue') as FormControl;
  }

  getMinValue() {
    if (this.toCtrl.value > this.fromCtrl.value) {
      this.fromCtrl.setValue(this.toCtrl.value);
    }
    return this.fromCtrl.value;
  }
}

Вот рабочий stackblitz