Angular 2数字表单验证，最小值和最大值

Question

我有一个包含文本框的表单，这些文本框既可以是文本类型也可以是数字类型。我需要对它们进行验证，并按照教程进行验证。

根据该教程，如果我要验证字符串，则可以使用以下控制组。

constructor(fb: FormBuilder){
    this.complexForm = fb.group({
      'firstName' : [null, Validators.required],
      'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
})

而这个的HTML代码如下...

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
      <div class="form-group">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
</form>

但是我还需要验证一个数字类型的输入框，就像下面的例子一样。

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
          <div class="form-group">
            <label>Age:</label>
            <input class="form-control" type="number"  [formControl]="complexForm.controls['age']">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
</form>

但问题在于校验器没有选择输入的最小值和最大值的选项。

有人有解决这个问题的办法吗？

谢谢。

- Dilanka Rathnayake

---

这是一个类似的问题：https://dev59.com/wVkS5IYBdhLWcg3wcGaW - mehari

Answer 1

目前的 Angular 4 版本现在拥有最小值和最大值验证器。

因此，编写起来就像这样简单。

this.complexForm = fb.group({
   age:[null,[Validators.required, Validators.min(5),Validators.max(90)]],
})

请记住，它位于@angular/forms存储库中。

$: npm uninstall @angular/forms --save
$: npm install @angular/forms --save

- user1752532

Answer 2

目前没有内置的 min/max 验证器，您可以查看Validator源代码以了解可用的选项。

您可以创建一个符合官方文档中自定义验证器函数的教程来解决问题。

例如：

export function maxValue(max: Number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const input = control.value,
          isValid = input > max;
    if(isValid) 
        return { 'maxValue': {max} }
    else 
        return null;
  };
}

使用此代码，您可以更新您的代码为

constructor(fb: FormBuilder){
this.complexForm = fb.group({
  'firstName' : [null, Validators.required],
  'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
  'age': [null, maxValue(60)]
})

- jkris

---

非常感谢您的回答 :) - Dilanka Rathnayake

@jkris - 感谢你提供的例子...但是，isValid = input >= max 不对吗？ - JGFMK

代码运行良好，但常量名称 isValid 看起来有些反了。我将其从 isValid 改为 invalid。返回 null 意味着它通过了验证检查。 - sandman0615

Answer 3

如果我理解正确，尝试将验证器的要求也包含在HTML中，这样您的代码将如下所示：

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
  <div class="form-group">
    <label>Age:</label>
    <input class="form-control" type="number" required minlength="5" maxlength="10" [formControl]="complexForm.controls['age']">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>

- Marcin

---

我必须更改CSS并在用户输入无效时提供警告框。因此，我必须检测输入是否有效或无效。那么，如何通过.ts文件检测用户输入是否有效或无效呢？ 此外，如果我们在HTML代码中声明为max = 10，则UI不允许输入超过10个字符。我不想这样做，这不够用户友好。我必须检测验证错误并提供警告框。 - Dilanka Rathnayake

Answer 4

我不确定这是否是您要找的，但 HTML 验证器始终是一个选择。

<input  type="number">

这样就可以防止用户输入除数字以外的任何内容，并且您不需要解析它，因为它将被设置为数字而不是字符串。

- Stephen DuMont

---

这并没有回答问题，但对于刚接触Web开发的人很有用。所以我点了个赞！ :) - Ross