CODEWITHSUNDEEP
angulardropdown
Kumail Hussain
Kumail Hussain

Reputation: 879

Angular 2: Drop down default value with validation not working

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?

Upvotes: 2

Views: 7253

Answers (2)

chandan kumar
chandan kumar

Reputation: 29

{{ city.sName }}

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

Upvotes: 0

AVJT82
AVJT82

Reputation: 73337

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

Upvotes: 2

Related Questions