在 Angular2 中验证反应式表单字段的最佳方法是什么?
What is the best way to validate reactive form field in Angular2?
我正在尝试验证 Angular 中的 Reactive 表单字段 2. 我在这里编写了自定义验证器,我不确定这是否是进行验证的正确方法。但是无论如何我都没有通过我的代码获得准确的结果,一些测试用例失败了。有知道的请指正代码和方法,如果有错
这些是我的条件,
如果输入通配符,文本字段应为 4 到 14 个字母数字。否则它是 7 到 25 个字母数字。
一个。如果输入星号 (*),则该字符必须是最后一个字符,并且应该是 5 到 13 个字母数字。
b。如果输入问号(?),它可以在 5 到 14(含)之间的任何位置。以下文本长度将被接受。
我。 7
ii.10
iii.11
四。 13
v。 14
c。如果不输入通配符,可以是7到25个字母数字。
这是我编写的自定义验证程序的代码。
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;
};
}
针对上述情况,我写完了'custom validator',但是当我从项目中调用它时,它只对第一次按键有效,即使它是一个在正在测试 differently.Can 大家请指正。
这是我更新后的代码。
//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;
}
}
您应该在您的表单控制器中调用自定义验证器,然后您的表单控制器将在每次按键时调用您的方法。
'productType': new FormControl('', [CustomValidators.productTypeValidation(6,25)]);
我正在尝试验证 Angular 中的 Reactive 表单字段 2. 我在这里编写了自定义验证器,我不确定这是否是进行验证的正确方法。但是无论如何我都没有通过我的代码获得准确的结果,一些测试用例失败了。有知道的请指正代码和方法,如果有错
这些是我的条件,
如果输入通配符,文本字段应为 4 到 14 个字母数字。否则它是 7 到 25 个字母数字。
一个。如果输入星号 (*),则该字符必须是最后一个字符,并且应该是 5 到 13 个字母数字。
b。如果输入问号(?),它可以在 5 到 14(含)之间的任何位置。以下文本长度将被接受。
我。 7
ii.10
iii.11
四。 13
v。 14
c。如果不输入通配符,可以是7到25个字母数字。
这是我编写的自定义验证程序的代码。
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;
};
}
针对上述情况,我写完了'custom validator',但是当我从项目中调用它时,它只对第一次按键有效,即使它是一个在正在测试 differently.Can 大家请指正。
这是我更新后的代码。
//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;
}
}
您应该在您的表单控制器中调用自定义验证器,然后您的表单控制器将在每次按键时调用您的方法。
'productType': new FormControl('', [CustomValidators.productTypeValidation(6,25)]);