In my project, I have an array of objects containing details for dynamically generating input fields. I have successfully implemented the dynamic input field generation based on the type received from an API. However, I am facing a challenge with matching the regular expression.
<ng-container *ngFor="let list of inputList">
<label>{{list.key}}</label>
<input [type]="list.type" [value]="list.value" [required]="list.required" [pattern]="list.regex" (input)="valueChange($event)" />
</ng-container>
The API response includes inputList:
[{key: "Name", type: "text", value: "", required: true, mandatory: false, regex: [A-Z][a-z]$}
{key: "Number", type: "number", value: "", required: true, mandatory: false, regex: [0-9]{10}$}
{key: "description", type: "textarea", value: "", required: true, mandatory: false, regex: [a-z]{10,250}}
{key: "email", type: "text", value: "", required: true, mandatory: false, regex: /\S+@\S+\.\S+/}];
Unfortunately, the patterns are not working as expected. Is there an alternative solution to restrict user input? For example, allowing only numeric values for mobile users by restricting other keys from being typed.