Angular Form validation not showing on Angular form error

Question

This is my 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').touched 
      && applicationDetailsForm.get('appName').minLength 
      && applicationDetailsForm.get('appName').maxLength">Provide a valid name</p>

and this is my component

ngOnInit() {
    this.applicationDetailsForm = this.formBuilder.group({
      appName: new FormControl ('', Validators.compose([Validators.required, Validators.maxLength(32), 
        Validators.minLength(4)]))
})

The errors in the Forms are not showing up. Please help!

where is your submit button? please post full code related to the form. — Krishnadas PC, Sep 18 '18 at 04:57
There's a lot of `&&`s in that condition. Does the error message appear if you comment some of those out? — Alex Peters, Sep 18 '18 at 04:57
refer this link, may this help you. https://stackoverflow.com/a/52354740/8358892 — Shashikant Devani, Sep 18 '18 at 05:05

Alex Peters · Answer 1 · 2018-09-18T05:31:35.097

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>

score 1 · Answer 2 · answered Sep 18 '18 at 07:34

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.

score 0 · Answer 3 · answered Sep 18 '18 at 04:58

0

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.

answered Sep 18 '18 at 04:58

Anuradha Gunasekara

6,553
2
27
37

`minLength` won't work because you aren't looking for it in the correct place. See [my answer](https://stackoverflow.com/a/52379218/4877269). – Alex Peters Sep 18 '18 at 05:33

Yusuff Bisiriyu · Answer 4 · 2018-09-18T05:58:43.627

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'); }

This won't work, because `appName` is not exposed as a `FormControl` by the component in the original code. — Alex Peters, Sep 18 '18 at 05:32

score 0 · Answer 5 · answered Sep 18 '18 at 05:12

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>

Angular Form validation not showing on Angular form error

5 Answers5