ngModel resets the value every time the [value] is sent to the ts

Question

Every time I try to send data to the ts file the ngModel resets the selection in the dropdown.

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

I have tried using [select] and onClick as well, However as the date is being transferred successfully, And the selection from the drop down is being reset every time I click on search button below. Which will send all the information from the data filled from the form.

As modifications can be done and be searched again. The selections on the form needs to stay Put. And all the data is static, But the dropdown resets itself, Please suggest me how to stop it from getting reset.

Please help

Thanks in Advance

Answer 1

Your issue is that inside the select you are using ngModel for every option. You have to use the ngValue directive like so:

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

here is a demo.

The ngModel registers a control with the Form element and the individual options are not separate controls because they are part of the select control.

So your code should look like (btw whenever you bind attributes to the individual elements you should use [] in favour of the interpolation syntax {{}} because it interpolates everything to a string and sometimes you would want to have a number, so my suggestion is - use the {{}} outside tags):

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

When using template driven forms I still haven't found a case where I would need "two-way data binding". The ngModel holds the value for each form control internally so in my opinion it's not good to have to manage the information in two places. You can just use [ngModel] without the () to bind the value to the control and then whenever you submit you can get the value from the form reference that the template variable f holds (in the example that I showed #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>

Answer 2

Try one way binding of ngModel.

[ngModel]="entity.parameterValue" 

Answer 3

EDIT:

I believe this is where the problem is, please update your button code with the following and try again. You need to specify the button type as "submit" for the Search Button and also remove the click event from there because that is what the (ngSubmit) is there for, you shouldn't explicitly bind the (click) event when using (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>

Before EDIT:

[(ngModel)] is not the reason your form is being reset, like you have said, you are clicking on a button in order to send the form data:

And the selection from the drop down is being reset every time I click on search button below. Which will send all the information from the data filled from the form.

That is happening because button type 'submit' will refresh the page, that is HTML behavior, in Angular you don't submit forms like that, you need to use either Template Driven Forms or Reactive Forms approach and bind the (ngSubmit) event to a function.

In the below example, #f is a local reference and we are passing in ngForm to the local reference. This local reference is being passed into the onSubmit(f) function which then can be accessed as an argument in the component.ts file.

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

Here's official angular documentation on how to use Template Driven forms: Template Driven Forms