角度2表单验证数字最小值和最大值

问题描述：

我有一个带有输入框的表单。输入框都是文字和数字。我必须验证它们，然后我遵循这个并试图验证它们。角度2表单验证数字最小值和最大值

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

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>

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

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

谢谢。

这里简单是simlilar问题http://stackoverflow.com/questions/39847862/min-max-validator- in-angular-2-final – Mehari

答

有没有内置的验证最小/最大目前你可以检出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)] 
})

非常感谢您的回答:) –

@jkris - THX例如......不过，是不是的isValid =输入> = MAX – JGFMK

答

如果我得到你的问题的权利，尝试还包括在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>

如果用户输入无效，我必须更改CSS并给出警告框。所以我必须检测输入无效或有效。那么如何通过.ts文件检测用户输入是否有效。此外，如果我们在HTML代码为max = 10声明UI不允许输入上面10.我不希望这样。它不是用户友好的。我要检测验证错误，并给予警告框 –

答

的角度当前版本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

角度2表单验证数字最小值和最大值

相关推荐