Angular 2 Form Validation数字最小值和最大值

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>

但问题是验证器没有选项可以选择输入的最小值和最大值。

有没有人有这个问题的解决方案？

谢谢。

Answer 1

当前版本的角度4现在有最小和最大验证器

所以它就像写作一样简单

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

请记住，它位于@angular/forms repo上

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

Answer 2

目前没有内置的最小/最大验证器，您可以查看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)]
})

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>

Answer 4

不确定这是否是您正在寻找的，但HTML验证器始终是一个选项

<input  type="number">

这将不允许用户输入除数字之外的任何内容，并且您不必解析它，因为它将被设置为数字而不是字符串。