角度4自定義驗證器不工作

我正在處理角度4併爲component.ts文件中的cgpa驗證（如果cgpa小於tahn 2.0或大於4.0）創建了一個自定義驗證器，但其不觸發但預定義的Validators.required工作正常。角度4自定義驗證器不工作

CGPA驗證：

function ValidCgpa(cgpa: FormControl): {[s: string]: boolean} { 
    let num = Number(cgpa); 

    if(num < 2.0 || num > 4.0) { 
    return {invalidCgpa: true}; 
    } 
}

定製CGPA驗證調用

this.educationalDetailsForm = new FormGroup({ 
    cgpa: new FormControl('', Validators.compose([Validators.required, ValidCgpa])) 
});

HTML代碼

<input type="text" formControlName="cgpa" placeholder="CGPA"> 

<div *ngIf="educationalDetailsForm.hasError('ValidCgpa','cgpa') && educationalDetailsForm.get('cgpa').touched"> 
    CGPA must be greater than 2.0 and less than 4.0 
</div>

來源

2017-10-19 ahsan

號（CGPA）應數（cgpa.value），或者更簡單的：+ cgpa.value。在代碼中添加日誌或使用調試器可以很容易地找到。如果沒有錯誤，驗證器會返回null，而不是未定義的。 –

這是正確的，但他說驗證程序沒有被調用，所以行是錯誤的，但這不是問題 – Nickolaus

除此之外，代碼是正確的。如果它沒有被調用，那麼需要一個完整的例子。請參閱http://plnkr.co/edit/XxZw1icOBLUDLtHgVy7V?p=preview。但我的猜測是OP *認爲*它沒有被調用，因爲錯誤消息沒有出現。 –

我想你實現驗證的方式是錯誤的，嘗試這樣的事情（未經測試）：

export function ValidCgpa(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
    const num = Number(cgpa.value); 
    if(num < 2.0 || num > 4.0) { 
     return {invalidCgpa: true}; 
    } 
    }; 
}

來源

2017-10-19 16:31:25 Nickolaus

我寧願做在HTML直接的驗證如下：

<input type="number" required name="cgpa" [(ngModel)]="cgpaValue" #cgpa="ngModel"> 

<div *ngIf="cgpa.touched && (!cpga.valid || cpga.value < 2 || cpga.value > 4)"> 
    CGPA must be greater than 2.0 and less than 4.0 
</div>

來源

2017-10-20 00:35:28

角度4自定義驗證器不工作

回答

相關問題