Как установить минимальные и максимальные значения для проверки угловой реактивной формы?

Question

У нас есть угловая реактивная форма, которая имеет поле дня рождения, месяца и года.Вот код:

 private buildSignupForm() {
    this.SignupForm = this.fb.group({
      bday: [null, [Validators.required, Validators.maxLength(2)]],
      bmonth: [null, [Validators.required, Validators.maxLength(2)]],
      byear: [null, [Validators.required, Validators.maxLength(4), Validators.minLength(4)]],
      city: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
    });
    this.SignupForm.setValidators(this.minimumAge(18));
  }
}

Как установить значение дня рождения минимум 01 максимум 31?И месяц: минимум 01 максимум 12?Год: минимум 1950 и максимум 2000, например?

Answer 1

Для этой цели можно использовать Validators.max и Validators.min .

 private buildSignupForm() {
    this.SignupForm = this.fb.group({
      bday: [null, [Validators.required, Validators.maxLength(2), Validators.max(31), Validators.min(1)]],
      bmonth: [null, [Validators.required, Validators.maxLength(2), Validators.max(12), Validators.min(1)]],
      byear: [null, [Validators.required, Validators.maxLength(4), Validators.minLength(4),Validators.max(2000), Validators.min(1950)]],
      city: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
    });
    this.SignupForm.setValidators(this.minimumAge(18));
  }
}

Вы можете вручную проверить срабатывание валидаторов min / max, открыв свойство errors в FormGroup.

console.log(this.SignupForm['controls']['bday'].errors.min); 
console.log(this.SignupForm['controls']['bday'].errors.max);
// prints true or false

И в вашем component.html вы можете включить какое-то сообщение проверки, которое будет отображаться / скрываться условно.

<div class="feedback" *ngIf="SignupForm['controls']['bday'].errors?.min">Minimum date is 1.</div>