Myujth

Consider a data model contains 20 string fields with different name ("name", "address", "company".. etc ), mapped to Angular front end as 20 input fields. Now the requirement asks to validate each fields that prevent user submit the form if any fields contain special characters.

I can work out the regex pattern but just wondering any simple way to do one validator to all fields.

There is a simple solution for this by using for example only one async validator.

For example you can group all the fields that we should verify whenever one field change in a subform
and then apply a validator to them.

Example:

this.mySubForm = this.fb.group(
 field1: ['', [Validators.required]],
 field2: ['', [Validators.required]],
 ...
 field20: ['', [Validators.required]]
, this.validatorAllFields.bind(this)

 });

And define the async validator this way:

validatorAllFields(control: FormGroup): any 
 if (control) 
 if(control.value.field1 don't contain special char … &&
 control.value.field2 don't contain special char … &&
 …
 control.value.field20 don't contain special char &&)
 //validation is ok in this case
 return null;
 else
 //validation fails here...
 return 'formInvalid': 'true'
 else 
 return null;
 
 

You can do this without any additional package and it will work.
just implement the: do not have any special char for each control, it should be the same function for example.

You can use formGroupName for the sub form, or even avoid the use of a sub form if you want.

This can be possible with '@rxweb/reactive-form-validators'. Just you have to create a FormGroup object from 'RxFormBuilder' instead of 'FormBuilder'. RxFormBuilder provides a feature to apply a single validation on all fields and also you can apply a validation individual fields.

Here is code example where I have applied 'required' validation on userName field and 'alphaNumeric' validation on all of the fields:

export class AppComponent implements OnInit 
userInfoFormGroup: FormGroup

 constructor(
 private formBuilder: RxFormBuilder
 ) 


 ngOnInit()
 this.userInfoFormGroup = this.formBuilder.group(
 userName:['',Validators.required],
 firstName:['',],
 lastName:['',]
 , new FormBuilderConfiguration(applyAllProps:[RxwebValidators.alphaNumeric(allowWhiteSpace:true)]));
 

Steps I have followed to achieve this:

1. npm install @rxweb/reactive-form-validators
   


2. import 'RxReactiveFormsModule' in root module.


3. Create the FormGroup through 'RxFormBuilder'.

Why I have suggested this approach with @rxweb/reactive-form-validators?

This can be possible with the standard angular approach, please refer the angular doc, If I go with the standard approach to create validators component-wise based on form fields and set if/else clause of fields 20 or more than 20 in the validator. I see with this approach, the code becomes messy and not readable.

The main reason to follow the approach of rxweb, your code should be more readable with less line of code. Because this is your one case to apply the same validation on 20 fields in a single go, there are fair chances the same scenario can be applied in multiple components with more than 20 fields. if that will be the case then rxweb validators would be more helpful than the standard approach.

Please refer to the working example on stackblitz.

More information about rxweb validators. please go to https://rxweb.io

Please let me know if you have any question.