Currently working on building a web application with Angular 6 and I have a query: I'm in the process of developing a custom input component (specifically for text inputs) like so:
@Component({
selector: 'input-text',
templateUrl: './input-text.component.html'
]
})
export class InputTextComponent {
@Input() pattern?: string;
}
I want to enable users to insert a regular expression for validating the input field, like this:
<input-text pattern="^[a-z0-9_-]{8,15}$"></input-text>
The template of my component is structured as follows:
<input type="text" [attr.pattern]="pattern"/>
Regrettably, I lack any knowledge pertaining to regular expressions. There are two things I aim to accomplish:
1 - Develop a method that verifies the validity of the regular expression and alters the visual style accordingly.
2 - Ensure that when the input (with a pattern attribute) is included in a form, the form.valid attribute remains false until the expression is valid.
Appreciate your assistance!