CODEWITHSUNDEEP
angularvalidation
Abilash Arjunan
Abilash Arjunan

Reputation: 333

Angular 6 or 2+ form validation for select option not being validated

angular version 6.x

Html file:

<select tabindex="4" class="selectoptn required" formControlName="invoice_type" 
          required [ngClass]="{ 'is-invalid': submitted && f.invoice_type.errors }">
            <option value="" [selected]="true" [ngValue]="undefined">Select an Invoice Type</option>
            <option value="pdf">PDF</option>
            <option value="brc">BRC</option>
          </select>
          <div *ngIf="submitted && f.invoice_type.errors" class="invalid-feedback">
            <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div>
          </div>

Related code in the Controller:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class ProjectsAddComponent implements OnInit {

constructor(private formBuilder: FormBuilder) {}

this.projectForm = this.formBuilder.group({
  'invoice_type': ['', Validators.required]
});
}

issues: - On submit the error message does not show up.

NOTE: - On submit all the other input are validated correctly - the inspector shows that the form element is invalid - http://prntscr.com/m97p2s

Let me know if someone can find a way out.

Upvotes: 0

Views: 5041

Answers (1)

Sachin Shah
Sachin Shah

Reputation: 4533

Your code looks perfect. I also faced this issue. At that time it was class issue. Just try to remove class as below. 

<div *ngIf="submitted && f.invoice_type.errors">    // Remove class from hear 
     <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div>
</div>

At that time I did not add any css for that class. And after remove that class it worked for me. So I think this might be the same issue.

And make sure you have to put <select> in <form> tag.

Hope it helps you :)

Upvotes: 2

Related Questions