Question

我有一个带输入框的表单。输入框有文本和数字两种类型。我必须对它们进行验证，然后我按照tutorial进行验证并尝试验证它们。

根据这一点，如果我必须验证一个字符串，那么我可以按如下方式使用控制组。

foreachRDD

此HTML代码如下......

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

但我必须验证数字类型输入框，如下例所示。

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

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

有人有解决此问题的方法吗？

感谢。

Answer 1

当前版本的角度4现在有min and max validators

所以它就像写

一样简单

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

目前没有内置的最小/最大验证码，您可以查看source for Validator以查看可用的内容。

您可以做的是在tutorials in the official docs

之后创建自定义验证程序功能

示例：

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

如果我的问题是正确的，请尝试包含验证工具＆＃39; 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">

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

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

4 个答案: