Угловая 2 выпадающая проверка не работает

1

У меня есть форма, управляемая шаблонами, с помощью кнопки выбора и отправки. Когда я нажимаю кнопку "Отправить", она показывает выпадающее сообщение о подтверждении, но оно также отправляет форму. Он показывает, что форма действительна в функции отправки. как указано ниже

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

Ниже приведен код javascript:

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

}

Итак, как предотвратить отправку формы и правильность выбора выпадающего списка?

Теги:
angular

1 ответ

1
Лучший ответ

[ngModelOptions]="{standalone: true}" приведет к select элемента, который не принадлежит form.

После того, как вы удалите его из select, если опция не выбрана, f.valid изменится на false, форма не будет отправлена, если вы хотите отправить форму.

см. демонстрацию Plinker.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню