如何为Angular响应式表单验证设置最小值和最大值？

Question

我们有一个Angular响应式表单，包含生日，月份和年份字段。以下是代码：

 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？

- NewTech Lover

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));
  }
}

你可以通过访问FormGroup上的errors属性来手动检查min/max验证器的触发。

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

在您的组件.html中，您可以包含某种条件显示/隐藏的验证消息。

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

- wentjun

---

谢谢回复。但是月份也会接受01吗？ - NewTech Lover

@NewTechLover 是的，只要输入值被解释为数字，就可以实现。如果您想测试一下，可以试试！ - wentjun

另外，我已经对最后两个代码块进行了一些更改，因为我们指定了特定的表单控件以便访问验证器输出。 - wentjun