在Angular2中驗證反應形式字段的最佳方法是什么？

Question

我正在嘗試驗證Angular 2中的Reactive form字段。在這里，我編寫了自定義驗證器，我不確定這是否是正確的驗證方法。 但是，無論我如何無法通過代碼獲得准確的結果，某些測試用例均會失敗。 如果有人知道，請糾正錯誤的代碼和方法。

這些是我的條件

1. 如果輸入通配符，則文本字段應為4到14個字母數字。 否則，它是7到25個字母數字。

   一種。 如果輸入星號（*），則必須為最后一個字符，並且應為5到13個字母數字。

   b。 如果輸入問號（？），則可以在5到14之間（包括5和14）之間的任意位置。 以下文字長度將被接受。

   一世。 7

   ii.10

   iii.11

   iv。 13

   v。14

   C。 如果未輸入通配符，則可以是7到25個字母數字s。

這是我的代碼，我已經編寫了自定義驗證器。

 static ProductTypeValidation(min: number, max: number): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null =>{ if(c && (c.value !== '')){ const s=c.value; var reg=/[^A-Za-z0-9]+/; var reg1=/[^A-Za-z0-9*?]+/; if(!s.match(reg)){ if(s.length<7 || s.length>25){ console.log('Invalid with size') return{ 'ProductTypeValidation': true }; } else{ console.log('valid with size'); return null; } }else{ if(s.match(reg1)){ console.log('Main Error'); return{ 'ProductTypeValidation': true }; }else{ for(let i=0;i<s.length && i<4;i++){ if(s.charAt(i).match(reg)){ console.log('Invalid first'); return{ 'ProductTypeValidation': true }; }else{ console.log('valid'); return null; } } if(s.length>4 && s.length < 14 ){ for(let i=4;i<13;i++){ if(s.charAt(i) == '*'){ if(s.charAt(i+1) == ''){ console.log('valid'); return null; }else{ console.log('Invalid *'); return{ 'ProductTypeValidation': true }; } } } } if(s.length>4 && s.length <15){ for(let i=4;i<14;i++){ if(s.charAt(i) == '?'){ if(s.length == 7 || s.length == 10|| s.length == 11 || s.length == 13 || s.length ==14){ console.log('valid'); return null; } else{ console.log('Invalid?'); return{ 'ProductTypeValidation': true }; } } } } for(let i=13;i<s.length && i<25;i++){ if(s.charAt(i).match(reg)){ console.log('Invalid remaining'); return{ 'ProductTypeValidation': true }; }else{ console.log('valid'); return null; } } } } } return null; }; } 

Answer 1

您應該在Form控制器中調用自定義驗證器，然后您的表單控制器會注意在每次按鍵時調用您的方法。

 'productType': new FormControl('', [CustomValidators.productTypeValidation(6,25)]); 

Answer 2

我已經完成了針對上述情況的``自定義驗證器''的編寫，但是當我從項目中調用它時，它僅對第一次按鍵有效，即使它是在進行不同測試時可以為我提供正確結果的功能。請糾正我。

這是我更新的代碼。

 //Custom validator for Product type static ProductTypeValidation(min: number, max: number): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null =>{ if(c && (c.value !== '')){ const s=c.value; var reg=/[^A-Za-z0-9]+/; var reg1=/[^A-Za-z0-9*?]+/; var reg2=/[^A-Za-z0-9*]+/; var reg3=/[^A-Za-z0-9?]+/; if(s.match(reg)) { if(s.match(reg1)) { console.log('Apart from special char existed') return{ 'ProductTypeValidation': true }; }else{ if(s.length < 4) { console.log('special char existed but length is minimum'); return{ 'ProductTypeValidation': true }; }else{ if(s.charAt(0).match(reg) || s.charAt(1).match(reg) || s.charAt(2).match(reg) || s.charAt(3).match(reg)) { console.log('first 4 positions it self special char existed'); return{ 'ProductTypeValidation': true }; }else{ if(s.length>4 && s.length<=14) { if(s.match(reg2) && s.match(reg3)) { let a=s.indexOf('*'); let b=s.indexOf('?'); if(b>a) { console.log('Invalid after * everything is invalid'); return{ 'ProductTypeValidation': true }; }else if((s.charAt(a+1) == '') && (s.length == 7 ||s.length == 10 || s.length == 11 ||s.length == 13 || s.length == 14) && (a<13)) { console.log('valid with all conditions * and ?'); return null; }else{ console.log('Invalid ? and *'); return{ 'ProductTypeValidation': true }; } } else if(s.match(reg2)) { if(s.length == 7 || s.length ==10 || s.length == 11 || s.length == 13 || s.length == 14) { console.log('valid with ?'); return null; }else{ console.log('invalid with ?'); return{ 'ProductTypeValidation': true }; } }else{ let a=s.indexOf('*'); let b=s.indexOf('?'); if(s.length>4 && s.length <14) { if(b>a) { console.log('Invalid after * everything is invalid'); return{ 'ProductTypeValidation': true }; }else if(s.charAt(a+1) == '') { console.log('vaid with *'); return null; }else{ console.log('Invalid with *'); return{ 'ProductTypeValidation': true }; } }else{ console.log('* exceeded the size'); return{ 'ProductTypeValidation': true }; } } }else{ if(s.match(reg)) { console.log('After 14 no special characters are allowed'); return{ 'ProductTypeValidation': true }; }else{ console.log('it will return null'); return null; } } } } } }else{ if(s.length<7 || s.length>25){ console.log('size not matched'); return{ 'ProductTypeValidation': true }; }else{ console.log('Size matched'); return null; } } } return null; } }