Блог

Каждый раз, когда я пытаюсь отправить данные в ts-файл, ngModel сбрасывает выбор в выпадающем списке.

  <select placeholder="select" class="custom-select"  id=" 
 {{entity.parameterDisplayName}}"
 [(ngModel)]="entity.parameterValue"
 name="{{entity.parameterDisplayName}}">
 <option [value]="-1"  [selected] ="true">Select Registration Type</option>
 <option  *ngFor="let regTypeValue of registrationTypeList"
 [ngValue]="entity.parameterValue" [value]="regTypeValue"  
 [selected]="regTypeValue">{{ regTypeValue }} </option></select>
 

Я также пробовал использовать [select] и onClick, однако, поскольку дата переносится успешно, и выбор из выпадающего списка сбрасывается каждый раз, когда я нажимаю на кнопку поиска ниже. Который отправит всю информацию из данных, заполненных из формы.

Поскольку изменения могут быть выполнены и повторен поиск. Выбор в форме должен оставаться на месте. И все данные являются статическими, но выпадающий список сбрасывается сам, пожалуйста, подскажите мне, как остановить его сброс.

Пожалуйста, помогите

Заранее спасибо

Редактировать:

Я полагаю, что в этом и заключается проблема, пожалуйста, обновите код кнопки следующим образом и повторите попытку. Вам нужно указать тип кнопки как «отправить» для кнопки поиска, а также удалить событие щелчка оттуда, потому что это то, для чего (ngSubmit) оно существует, вы не должны явно привязывать (click) событие при использовании (ngSubmit)

       <button
        type="reset"
        class="btn btn-secondary pl-4 pr-4 mr-3"
        (click)="reset();">
        Reset
      </button>
      <button
        type="submit"
        class="btn btn-primary pl-4 pr-4"
        [disabled]="!searchButtonEnabled"
        ng-disabled="loginform.$invalid">
        Search
      </button>
 

Перед РЕДАКТИРОВАНИЕМ:

[(ngModel)] не является причиной сброса вашей формы, как вы сказали, вы нажимаете на кнопку, чтобы отправить данные формы:

И выбор из выпадающего списка сбрасывается каждый раз, когда я нажимаю на кнопку поиска ниже. Который отправит всю информацию из данных, заполненных из формы.

Это происходит потому, что кнопка типа «отправить» обновит страницу, то есть поведение HTML, в Angular вы не отправляете такие формы, вам нужно использовать Template Driven Forms Reactive Forms подход или и привязать (ngSubmit) событие к функции.

В приведенном ниже примере #f является локальной ссылкой, и мы переходим ngForm к локальной ссылке. Эта локальная ссылка передается в onSubmit(f) функцию, к которой затем можно получить доступ в качестве аргумента в component.ts файле.

  <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>
 

Вот официальная документация angular о том, как использовать формы, управляемые шаблоном:
Формы, управляемые шаблоном

Ваша проблема в том, что внутри выбора, который вы используете ngModel для каждого параметра. Вы должны использовать ngValue директиву следующим образом:

 <form #f="ngForm">
  <select name="test" [(ngModel)]="selectValue">
    <option [ngValue]="1">1</option>
    <option [ngValue]="2">2</option>
    <option [ngValue]="3">3</option>
  </select>
</form>
 

вот демонстрация.

ngModel регистрирует элемент управления с помощью элемента формы, и отдельные параметры не являются отдельными элементами управления, поскольку они являются частью элемента управления select .

Таким образом, ваш код должен выглядеть так (кстати, всякий раз, когда вы привязываете атрибуты к отдельным элементам, вы должны использовать [] в пользу синтаксиса интерполяции {{}}, потому что он интерполирует все в строку, а иногда вам нужно иметь число, поэтому мое предложение — использовать {{}} внетеги):

 <select [id]="entity.Name" [(ngModel)]="entity?.parameterValue || -1" class="custom-select" [name]="entity.Name">
  <option [ngValue]="-1">Select Registration Type</option>
  <option  *ngFor="let rgValue of rgList"
  [ngValue]="rgValue">{{rgValue}}</option>
</select>
 

При использовании форм, управляемых шаблоном, я до сих пор не нашел случая, когда мне понадобилась бы «двусторонняя привязка данных». Он ngModel содержит значение для каждого элемента управления формой внутри, поэтому, на мой взгляд, нехорошо управлять информацией в двух местах. Вы можете просто использовать [ngModel] без () привязки значения к элементу управления, а затем всякий раз, когда вы отправляете, вы можете получить значение из ссылки на форму, которую f содержит переменная шаблона (в примере, который я показал #f =»ngModel»)

 <form #f="ngForm" (ngSubmit)="submitHandler(f.value)">
  <select [id]="entity.Name" [ngModel]="entity?.parameterValue || -1" class="custom-select" [name]="entity.Name">
    <option [ngValue]="-1">Select Registration Type</option>
    <option  *ngFor="let rgValue of rgList"
  [ngValue]="rgValue">{{rgValue}}</option>
  </select>
</form>
 

Попробуйте одностороннюю привязку ngModel.

 [ngModel]="entity.parameterValue"