CODEWITHSUNDEEP
javascriptangular
Shiri
Shiri

Reputation: 47

Angular 2 dropdown validation not working

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?

Upvotes: 1

Views: 920

Answers (1)

Pengyy
Pengyy

Reputation: 38161

[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.

Upvotes: 1

Related Questions