Alphanumeric String Validation in Angular 6

Question

I need to validate user input with below validations and shoulw not allow user to submit the form untill the validation error messages are cleared

Below are the validations my code need to perform. 1)String will be a alphanumeric. 2)String Length should not be more than 7 3)String should be either of theses patterns "w123456"(w followed by 6 numbers) or "df12345"(df followed by 5 numbers)

Can someone help me how to validate this?

 Contact:   <textarea  required ngModel name="contacts" #contacts='ngModel' placeholder="Enter Valid contactid" ngModel name="contacts" #contacts="ngModel" rows="10" cols="15"></textarea>

I've provide a JSFiddle link below. https://jsfiddle.net/sonyjammie/sx4rv8ne/4/

Answer 1

You can try to use compose validator of RxwebValidators for using multiple validators. You can refer [ https://stackblitz.com/edit/angular-48jrxb?file=src%2Fapp%2Falpha-numeric-add.component.ts] for your reference.

Answer 2

Typically you would validate this with either some validate() function on the submit button, or alternatively, if using the RXJS library , you can assign an [array of Validators] as a second @parameter to a FormControl object.

Also check out the official documentation on Form Validation from Angular.

In Angular6, you would keep the form's submit button disabled by using the [disabled] attribute on the button element, and assigning your specific conditions to said element's [disabled] attribute.

Answer 3

name:['',[Validators.required,Validators.minLength(3),Validators.maxLength(15),Validators.pattern('[A-Za-z]')]],