userForm value not in range

Issue

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 class="container">

    <div *ngIf="errorMsg" class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>{{errorMsg}}</strong> 
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>

      

      <form [formGroup]="userForm"  >

    <div class="col-lg-4 mt-2" >
        <label>Employee ID:</label>
        <input type="number" class="form-control"  formControlName="id"  [(ngModel)]="id">
    </div>
        
    
    <div class="col-lg-4 mt-2" *ngIf="!getParamId" >
        <button class="btn btn-primary btn-sm" [disabled]="!name || !des ||!photo||!id" (click)="userSubmit()">
            Submit!!
        </button>
    </div>

    <div class="col-lg-4 mt-2" *ngIf="getParamId" >
        <button class="btn btn-dark btn-sm"  (click)="userUpdate()" >
            Update
        </button>
    </div>

</form>


</div>

Solution

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" class="form-control"  formControlName="id"  [(ngModel)]="id">

Hence you can't use .length as this property doesn't exist in the number value.

---

1. Change the <input> element from type="number" to type="text" or without type. (By default type is text).

2. Since you are using the Reactive form, you don't need the [(ngModel)].

<input type="text" class="form-control" formControlName="id" />

3. Add Validators.minLength() and Validators.maxLength() validators to id 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}')

4. To disable the submit button when there is any control(s) that failed the validation:

<button
  class="btn btn-primary btn-sm"
  [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.

Demo @ StackBlitz

Answered By - Yong Shun