必需的驗證器不能與編號

一起使用當輸入爲空時，不會顯示任何錯誤。必需的驗證器不能與編號

原因是NumberValueAccessor選擇器匹配輸入，並將Control的值設置爲一個數字。如果輸入的輸入字符串與數字不匹配，則值爲NaN。這是空字符串的情況。但是，只有當控制值爲空（空或未定義）或空字符串時，所需的驗證程序纔會返回錯誤。這不是這兩種情況中的任何一種情況，因爲NumberValueAccessor將該值設置爲NaN編號。

所需的驗證程序無法真正驗證NaN值，因爲它可以出現在空字符串中，也可以用於不是數字的字符串（如'aaa'）。問題是驗證器無法從控制變量中檢索輸入的字符串。

從https://github.com/angular/angular/issues/6932

引用我仍然面臨着這個問題。 Angular2中是否有任何解決方案

來源

2016-11-16 Faris

您可以始終執行您自己的requiredNumber指令來申請。

唯一特別的是它明確尋找未初始化的null，control.value將被設置爲數字輸入。

要求，number.validator.ts

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core'; 
import { AbstractControl, NG_VALIDATORS, Validator, Validators, ValidatorFn } from '@angular/forms'; 

function validateRequiredNumberFactory() : ValidatorFn { 
    return (control: AbstractControl) => { 
    let isValid = !isNaN(control.value) && control.value !== null; 
    console.log('isNaN: ' + isNaN(control.value)); 

    if(isValid) { 
     return null; 
    } 
    return { numberIsRequired: true }; 
    } 
} 

@Directive({ 
    selector: '[requiredNumber][ngModel]', 
    providers: [{provide: NG_VALIDATORS, useExisting: RequiredNumberValidatorDirective, multi: true}] 
}) 
export class RequiredNumberValidatorDirective implements Validator, OnChanges { 
    private valFn = Validators.nullValidator; 

    constructor() { 
    this.valFn = validateRequiredNumberFactory(); 
    } 

    validate(control: AbstractControl): {[key: string]: any} { 
    return this.valFn(control); 
    } 
}

輸入是這樣的：

<input requiredNumber name="someName" [(ngModel)]="myProperty" #namedInput="ngModel"/>

這裏有一個plunker在那裏你可以調整自己的喜好http://plnkr.co/edit/gxTxOQBg8ilFHzgq4Ly0

信貸，這是由於，這個答案來源於：http://juristr.com/blog/2016/11/ng2-template-driven-form-validators/

因爲我主要利用Reactive Forms和我的驗證器完成代碼和模板之外的工作。

來源

2016-11-16 21:59:30 silentsod

必需的驗證器不能與編號

回答

相關問題