CODEWITHSUNDEEP
angularangular2-form-validation
asdf_enel_hak
asdf_enel_hak

Reputation: 7630

select option with default value undefined with required attribute does not work but value empty

I have a dropdown of countries

<select  #countryInput  name="country" [(ngModel)]="room.countryId"   required>
  <option   [selected] [value]="undefined">Select Country</option>
  <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
</select>

In order to "Select Country" option, it is required to set [value]="undefined" otherwise it would not be shown as default selection instead empty selection.

Even though field marked is as required, on form submit required wont be show as it does for 

<option value="">Select Country</option>

which is default behaviour in html 5:

enter image description here

As a work around handle validation on form submit, but this time first required fields will be validated but lastly country field.

if (this.room.country == undefined) {
   alert('select country ');
   return false;
}

What could be solution to field with [value]="undefined" and show "Please select an item first" alert?

See the forked fiddle from Daniel's

Upvotes: 2

Views: 19019

Answers (3)

Vikas Dubey
Vikas Dubey

Reputation: 340

i also had the same issue using following solved the problem for me 

 <select class="o-field__input" [disabled]="isAnswerPresent" [(ngModel)]="inputValue" (change)="onAnswerChange()" required>
                <option [ngValue]="undefined">placeholder</option>

                <option [ngValue]="option" *ngFor="let option of optionSet;">option values</option>                     

            </select>

Upvotes: 5

Nenad Radak
Nenad Radak

Reputation: 3678

Setting choose state value to empty string <option value="">Choose a state</option> , and in ts file declare myDropDown to empty string also,will solve problem.

 myDropDown = '';

or

 myDropDown= this.items[0].id;

html

 <form ngNativeValidate>
   <select [(ngModel)]="myDropDown"  (ngModelChange)="onChangeofOptions($event)" 
    required [ngModelOptions]="{standalone: true}">
     <option value="">Choose a state</option>
     <option *ngFor="let option of items;"[value]="option.id">{{option.name}}</option>
   </select>
   <input [hidden]="myDropDown !=='two'"type="text">
   <input type="submit" value="submit form">
  </form>

Upvotes: 0

Daniel B
Daniel B

Reputation: 8879

To set a placeholder value of your select, set the state of the model to null and add an option with a null value. The required state will invalidate null as an option, which will set the form to invalid, and the specific control to be invalid. You can handle the validation message in any way you want.

With reactive forms

In your template

<form [formGroup]="form">
    <select [(ngModel)]="country" formControlName="country">
      <option [ngValue]="null">Choose a state</option>
      <option *ngFor="let option of items;"[ngValue]="option">{{option.name}}</option>
  </select>
</form>

and in your component

form = new FormGroup({
country: new FormControl(null, Validators.required)

With template driven forms

In your template

<form #f="ngForm">
  <select name="countryTemplateForm" [ngModel]="countryTemplateForm" required>
    <option [ngValue]="null">Choose a country</option>
    <option *ngFor="let country of countries" [ngValue]="country">
      {{ country.name }}
    </option>
  </select>
</form>

and in your component

countryTemplateForm = null;
countries = [
  { name: 'USA'},
  { name: 'India' },
  { name: 'France' }
];

Have a look at this StackBlitz example!

Upvotes: 3

Related Questions