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年例如？

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属性来手动检查最小/最大验证器的触发。

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>

如何设置Angular反应形式验证的最小值和最大值？

1 个答案: