javascript - 最小值和最大值的 Angular 2 表单验证

Question

我有一个带有输入框的表单。输入框既有文字也有数字。我必须验证它们并且我遵循了这个 tutorial并尝试验证它们。

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

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

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

所以写起来就这么简单

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