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

但問題是驗證器沒有選擇什麼是輸入的最小值和最大值的選項。

有沒有人有解決這個問題的方法？

謝謝。

來源

2016-11-18 Dilanka Rathnayake

這裏簡單是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)] 
})

來源

2016-11-18 09:05:39 jkris

非常感謝您的回答:) –

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

來源

2016-11-18 08:39:59 Marcin

如果用戶輸入無效，我必須更改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

來源

2017-08-06 10:18:55

角度2表單驗證數字最小值和最大值

回答

相關問題