Angular 2 dropdown validation not working

Question

I have a template driven form with select dropdown and submit button. When I click on submit button, it shows dropdown required validation message, but it also submits the form. It shows form is valid in submit function. as below code

<form  #f="ngForm"   name="eventForm" id="eventForm"  #eventForm="ngForm"  (ngSubmit)="f.valid && saveForm(eventForm, $event)" novalidate>
<div class="form-group" >
  <div class="col-md-6 col-sm-6 col-xs-12">
    <label for="select_store" class=" control-label">Select Package</label>
      <select  multiple tabindex="10"  name="package_id" [ngModelOptions]="{standalone: true}"   #package_id='ngModel'  tabindex="4"   required id="package_id" [(ngModel)]="event.content.package_id"   >
        <option *ngFor="let pk of listDetails" value="{{pk.id}}">{{pk.name}}</option>
      </select>
       <small style="color:red" *ngIf="(eventForm._submitted && !package_id.valid && !eventForm.package_id) || (!package_id.valid && package_id.dirty) ">Content required.</small>
  </div>
</div>

Below is my javascript code:

saveForm(form:NgForm, event: Event) {
  console.log(form.valid)     
   event.preventDefault();

}

So how to prevent form submitting and make dropdown validation in a correct way?

Pengyy · Accepted Answer · 2017-08-09 06:59:39Z

1

[ngModelOptions]="{standalone: true}" will lead select to be an element which doesn't belong to form.

After removing it from select, if there is no option selected, then f.valid will turn false, form will not be submitted if you attend to submit the form.

refer Plinker demo.

answered Aug 9, 2017 at 6:59

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 dropdown validation not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related