CODEWITHSUNDEEP
javascriptangular
Ilthizam Imtiyas
Ilthizam Imtiyas

Reputation: 179

How to validate an angular reactive dropdown in a form

I want to set up validation for my dropdown. Here is my template code...

<div class="form-group row">
    <label class="col-lg-4 col-form-label" for="val-skill">Designation <span class="text-danger">*</span>
    </label>
    <div class="col-lg-6">
        <select class="form-control"id="val-skill" name="val-skill">
            <option value="">Please select</option>
            <option value="admin">Admin</option>
            <option value="staff">Staff</option>
        </select>
    </div>
    <div *ngIf="accessName.touched && accessName.invalid">
        <div *ngIf="accessName.errors.required">
            <div class="alert alert-danger">
                Select access type
            </div>
        </div>
    </div>
</div>

and this is my form control code...

form = new FormGroup({
    accessName:new FormControl('',Validators.required),
});

get accessName() {
    return this.form.get("accessName");
}

Dropdown is selected to 'Please select' by default. When the user touched the drop down and not changed the type it should display the validation error.

How can I do this implementation?

Upvotes: 3

Views: 11316

Answers (2)

Libin Prasanth
Libin Prasanth

Reputation: 569

When you can use Reactive Form use the following format to validate your form. Refer following link https://codesandbox.io/s/angular-1xffg

Html Code

<section class="py-3">
  <div class="container">
    <form [formGroup]="simpleForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <select
          class="form-control"
          formControlName="accessName"
          id="val-skill"
          name="val-skill"
          [ngClass]="{ 'is-invalid': submitted && f.accessName.errors }"
        >
          <option value="">Please select</option>
          <option value="admin">Admin</option>
          <option value="staff">Staff</option>
        </select>
        <div class="invalid-feedback" *ngIf="submitted && f.accessName.errors">
          <div *ngIf="f.accessName.errors.required">
            Access Name is required
          </div>
        </div>
      </div>
      <button class="btn btn-primary">Submit</button>
    </form>
  </div>
</section>

.ts file 

import { Component } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";

  simpleForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.simpleForm = this.formBuilder.group({
      accessName: ["", [Validators.required]]
    });
  }

  get f() {
    return this.simpleForm.controls;
  }
  onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.simpleForm.invalid) {
      return;
    }
    console.log(this.simpleForm.value);
  }
}

Upvotes: 3

Rushi Patel
Rushi Patel

Reputation: 601

<select class="form-control"  formControlName="accessName" id="val-skill" name="val-skill">
   <option value="">Please select</option>
   <option [value]="admin">Admin</option>
   <option [value]="staff">Staff</option>
 </select>

Upvotes: 4

Related Questions