时间戳

首页 > 解决方案 > Angular 7：修改此自定义验证器，使其正确检查大于 1 的值

angular7 - Angular 7：修改此自定义验证器，使其正确检查大于 1 的值

问题描述

在我的 Angular 7 应用程序中，我制作了一个自定义验证器，它应该检查输入到表单控件中的值是否大于或等于 2。

我的自定义验证器：

static greaterThanOne(control: AbstractControl) {
  const v = control.value;
  if ( v >= 2) {
    return null;
  } else {
    return { greaterThanOne: true };
  }
}

我的 HTML

    <div class="col-lg-2">
      <label class="sr-only" for="dependency-section-2-3"> How many people are in the
        household?</label>
      <input
        required
        maxlength=2
        numericOnly
        formControlName="studentHouseHold"
        name="studentHouseHold"
        id="studentHouseHold"
        class="form-check-input"
        data-hint="yes"
        type="text"
        class="form-control col-4"
        data-hint="yes"
        value=""
      >
      <div *ngIf="sectionTwo.studentHouseHold.errors && sectionTwo.studentHouseHold.touched"
        class="alert text-danger m-0 p-0 col-md-12">
        <div
          *ngIf="sectionTwo.studentHouseHold.touched && sectionTwo.studentHouseHold.invalid && sectionTwo.studentHouseHold.errors.greaterThanOne && sectionTwo.studentHouseHold.errors.earningsFormat && !sectionTwo.studentHouseHold.errors.required"
          class="alert text-danger m-0 p-0 col-md-12">
          Invalid entry.
        </div>
        <div *ngIf="sectionTwo.studentHouseHold.errors.required">This field is required.</div>
      </div>
    </div>

需要注意的一些事项...我无法将输入类型从“文本”更改为“数字”。为了解决这个问题，我制作了一个自定义指令“numericOnly”，它只允许用户输入数字。我只需要修改自定义验证器，以便用户输入的任何值都必须大于或等于 2。

我还尝试将 angulars 验证器 Validator.min(2) 添加到我的表单控件中，但这不起作用。

标签： angular7customvalidator

解决方案

经过一些测试，这实际上是编写验证器的正确方法：

static greaterThanOne(control: AbstractControl): { [key: string]: boolean } {
  const isValidNum = (/^([2-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])$/).test(control.value);
  return isValidNum ? null : { greaterThanOne: true };
}

如果有人遇到类似的问题，希望这会有所帮助。

推荐阅读