Angular 2: Drop down default value with validation not working

Question

Currently I am stuck with drop down, the problem is the required validator and the default value selected

Snippet1.html

            <div class="input-group" >
              <select  required name="industryType" id="industryType" [(ngModel)]="institution.industryType" aria-describedby="sizing-addon1" class="select-custom">
                <option selected [value]="null">Select Industry</option>
                <option value="IT">IT</option>
                <option value="Business">Business</option>
                <option value="Engineering">Engineering</option>
                <option value="Teaching">Teaching</option>
                <option value="Marketing">Marketing</option>
              </select>
              </div>

     <button type="submit"   class="btn btn-primary login-button border-custom">Add Industry</button>

On clicking button it asks me to fill the drop down but the problem is default value is not selected i.e Select Industry rather then showing the default value it shows nothing, but the validation works fine.

Snippet2.html

        <div class="input-group" >
          <select   required name="industryType" id="industryType" [(ngModel)]="institution.industryType" aria-describedby="sizing-addon1" class="select-custom">
            <option selected [value]="default">Select Industry</option>
            <option value="IT">IT</option>
            <option value="Business">Business</option>
            <option value="Engineering">Engineering</option>
            <option value="Teaching">Teaching</option>
            <option value="Marketing">Marketing</option>
          </select>
             </div>
 <button type="submit"   class="btn btn-primary login-button border-custom">Add Industry</button>

On clicking button it does not asks me to fill the drop down but the default value is selected i.e Select Industry, validation doesn't work with this snippet can any one suggest me what I am doing wrong or what is the right way to do it?

You should begin by adding required to your select if user must provide a value for that field <select ... required>...</select>. Concerning the default value, did you try something like : <option value="" selected>Select Industry</option> — mickdev
– mickdev, Commented Mar 14, 2017 at 19:23
sorry i have missed it while pasting the code but required works with first snippet not with the second one and yes i have tried that too value="" it is not showing the default value in the drop down — Kumail Hussain
– Kumail Hussain, Commented Mar 14, 2017 at 19:27

AVJT82 · Accepted Answer · 2017-03-15 09:51:56Z

2

Removing the two way binding from the form seems to solve the issue, so change this:

[(ngModel)]="institution.industryType"

to just this:

ngModel

And then just having the preselected option using value="", so your complete template would look like this:

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">
  <select required name="industryType" id="industryType" ngModel>
    <option value="" selected disabled>Select Industry</option>
    <option value="IT">IT</option>
    <option value="Business">Business</option>
    <option value="Engineering">Engineering</option>
    <option value="Teaching">Teaching</option>
    <option value="Marketing">Marketing</option>
  </select>
  <button type="submit">Add Industry</button>
</form>

In the form you don't really need to have the two way binding, you can access this form value from the object that is created from the form, when you pass that form value to your submit:

submit(formValue) {
  console.log(formValue.industryType) // here is your industry type
}

Then you can of course assign this value to your object institution if you want/need.

Here's a....

Demo

edited Mar 15, 2017 at 9:51

answered Mar 15, 2017 at 9:39

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Azimuth Over a year ago

You demo doesn't work. The submit method is called even if one doesn't select any value in dropdown.

chandan kumar · Accepted Answer · 2017-05-28 20:09:05Z

0

it will work for default selection {{ city.sName }}

answered May 28, 2017 at 20:09

chandan kumar

293 bronze badges

Collectives™ on Stack Overflow

Angular 2: Drop down default value with validation not working

2 Answers 2

Demo

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related