Angular Form validation not showing on Angular form error

You're testing for minLength && maxLength in your condition to display the error message. They'll never both be active at the same time.

You're also not looking for the minLength & maxLength errors correctly. They're not a direct property of the FormControl itself—they're errors subproperties.

You might have better luck with this:

*ngIf="
    applicationDetailsForm.get('appName').touched && (
        applicationDetailsForm.get('appName').hasError('required') 
        || applicationDetailsForm.get('appName').hasError('minLength')
        || applicationDetailsForm.get('appName').hasError('maxLength')
    )
"

Consider also adopting the Angular best practices of accessing the FormControl through a getter:

• component.ts:

  get appName() { return this.applicationDetailsForm.get('appName'); }
  

• component.html:

  <form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
      <label>Organization Name</label>
        <input type="text" formControlName="appName" id="appName" required>
        <p class="error_message" *ngIf="appName.touched && (
            appName.errors.required
            || appName.errors.minLength
            || appName.errors.maxLength
        )">Provide a valid name</p>
  

You can use Validators.pattern

ngOnInit() {
    this.applicationDetailsForm = this.formBuilder.group({
      appName: new FormControl ('', Validators.compose([Validators.required,Validators.pattern('^[a-z0-9]{4,32}$')]))
})

html

<form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
    <label>Organization Name</label>
      <input type="text" formControlName="appName" id="appName" required>
      <p class="error_message" *ngIf="
      applicationDetailsForm.get('appName').hasError('required') && applicationDetailsForm.get('appName').hasError('pattern') 
      >Provide a valid name</p>

this way you will have more control over the validation.

It's better if you can add separate error messages for every validation error.

<p class="error_message" *ngIf=" applicationDetailsForm.get('appName').hasError('required')">Name is required</p>

<p class="error_message" *ngIf=" applicationDetailsForm.get('appName').minLength">Name length should not be less than 4 charactors</p>

As you have && between your validations in the template the condition is always false. The min length and max length will not be true at the same time.

ts:

ngOnInit() {
  this.applicationDetailsForm = this.formBuilder.group({
    appName: [{value: '', disabled: false}, [Validators.required, Validators.maxLength(32), Validators.minLength(4)]]
  })
}

template:

<p class="error_message" *ngIf="
      applicationDetailsForm['controls'].appName.hasError('required') 
      || applicationDetailsForm['controls'].appName.touched 
      || applicationDetailsForm['controls'].appName.hasError('minLength') 
      || applicationDetailsForm['controls'].appName.hasError('maxLength')">Provide a valid name
</p>

You don't need to write so much to get the reference to the input field. Try displaying the error messages like this.

 <form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
    <label>Organization Name</label>
      <input type="text" formControlName="appName" id="appName" required>
      <div *ngIf="appName.invalid && (appName.dirty || appName.touched)">
        <p *ngIf="appName.errors.minlength">
          Name must be at least 4 characters long.
         </p>
        <p *ngIf="appName.errors.maxlength">
          Name must not be more than 10 characters long.
         </p>
       </div>
  </form>

in .ts file

// create a getter for the form control
get appName() { return this.applicationDetailsForm.get('appName'); }