Блог

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

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

#angular #typescript #angular6

#угловатый #typescript #angular6

Вопрос:

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

  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, например?

Ответ №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>

Комментарии:

1. Спасибо за ответ. Но будет ли месяц также принимать 01?

2. @NewTechLover Да, при условии, что входное значение интерпретируется как число. Вы можете проверить это, если хотите!

3. Кроме того, я внес некоторые изменения в последние 2 блока кода, поскольку мы указали конкретный элемент управления формой для доступа к выводам валидатора

Метки: