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回购

$: 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>