I am trying to validate the length of ID value in userForm in Angular14, I tried for
if(this.userForm.value.id.length < 6 || this.userForm.value.id.length >9){
console.log("length error")
}
But this is not giving the expected result. the above snippet is working for != and =
only.
How can I validate this value for the range.
Adding the .ts and .html snippets for the better understanding. component.ts
userSubmit(){
console.log(this.userForm.get('image').value);
console.log(this.userForm.value);
const formData = new FormData();
formData.append('image', this.images);
formData.append('id', this.userForm.value.id);
formData.append('des', this.userForm.value.des);
formData.append('name', this.userForm.value.name);
if(this.userForm.value.id.length < 6 || this.userForm.value.id.length > 9){
console.log("length error")
}
component.html
<div >
<div *ngIf="errorMsg" role="alert">
<strong>{{errorMsg}}</strong>
<button type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form [formGroup]="userForm" >
<div >
<label>Employee ID:</label>
<input type="number" formControlName="id" [(ngModel)]="id">
</div>
<div *ngIf="!getParamId" >
<button [disabled]="!name || !des ||!photo||!id" (click)="userSubmit()">
Submit!!
</button>
</div>
<div *ngIf="getParamId" >
<button (click)="userUpdate()" >
Update
</button>
</div>
</form>
</div>
CodePudding user response:
From what I understand from your question, you are performing the validation for id
with the length within a range.
The problem is currently your id
is not a string
, but it is a number
.
<input type="number" formControlName="id" [(ngModel)]="id">
Hence you can't use .length
as this property doesn't exist in the number
value.
Change the
<input>
element fromtype="number"
totype="text"
or withouttype
. (By defaulttype
istext
).Since you are using the Reactive form, you don't need the
[(ngModel)]
.
<input type="text" formControlName="id" />
- Add
Validators.minLength()
andValidators.maxLength()
validators toid
form control.
import { Validators } from '@angular/forms';
this.userForm = this.fb.group({
id: [
'',
[Validators.required, Validators.minLength(6), Validators.maxLength(9)],
],
// Following controls
});
Note: If you want the id
input to be numeric characters, you need Validators.pattern()
:
Validators.pattern('[0-9] ')
Or validate with the length as well, so the Validators.minLength()
and Validators.maxLength()
can be omitted.
Validators.pattern('[0-9]{6,9}')
- To disable the submit button when there is any control(s) that failed the validation:
<button
[disabled]="idHasError /* or other form controls */"
(click)="userSubmit()"
>
Submit!!
</button>
And implementing the getter.
get idHasError() {
return this.userForm.controls.id.errors;
}
Implement the getter method(s) for the rest form control(s) to return a boolean value that the form control has errors
or not.