CODEWITHSUNDEEP
angularuser-interfacedropdownangular2-forms
Twisha
Twisha

Reputation: 381

Clear button is not resetting the selected values in dropdown in angular 6

I have 2 dropdowns on my page which I want to clear when I hit the clear button. Can someone please take a look at the code below and help me out if I am missing something. New to angular and so sorry if this is something very obvious. Thanks in advance!

The code for clear button is as shown below 

   <form name="myform" #f="ngForm" novalidate>
    <fieldset>
      <div class="tab-content">
        <div ng-if="paramId == jobExecution" id="jobExecution" class="tab-pane in active">
          <div style='text-align: left'><h6>Enter Data </h6></div>
          <div class="space"></div>
            <div class="row">

              <div class="col-xs-12 col-sm-3">
                  <div class="form-group">
                      <label for="form-field-8" >Select a value</label>
                      <select class="form-control" id="form-field-select-1" name="study" [(ngModel)]="jobExecDetails.study" >
                          <option value="" >Select an option</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                      </select>
                  </div>
              </div>

              <div class="col-xs-12 col-sm-3">
                  <div class="form-group">
                      <label for="form-field-8">Select Domain</label>
                      <select class="form-control" id="form-field-select-1" name="domain" [(ngModel)]="jobExecDetails.domain">
                          <option value="" >Select an option</option>
                          <option value="1">Domain 1</option>
                          <option value="2">Domain 2</option>
                          <option value="3">Domain 3</option>
                          <option value="4">Domain 4</option>
                      </select>
                  </div>
              </div>

              <div class="col-xs-12 col-sm-6">
                  <div class="form-group">
                    <br><br>
                      <button (click)="submit(jobExecDetails)" class="btn btn-default">Submit</button>
                      &nbsp;&nbsp; &nbsp;&nbsp;<button class="btn btn-inverse"
                      (click)="reset(jobExecDetails)">Clear</button>
                  </div>
              </div>

            </div>
        </div>
      </div>
    </fieldset>
  </form>

And in my component.ts file, the function looks like this



 public reset(jobExecDetails): void {
    this.jobExecDetails = '';
    this.view = '';
  }

Upvotes: 3

Views: 8960

Answers (3)

Tom Balcaen
Tom Balcaen

Reputation: 101

Try setting the values separately. like this:

public reset(jobExecDetails): void {
    this.jobExecDetails.study = "";
    this.jobExecDetails.domain = "";
    this.view = ''; 
  }

Upvotes: 0

yannick
yannick

Reputation: 715

Since you are binding your selects to this.jobExecDetails.domain and this.jobExecDetails.study you have to rset these properties in your reset method:

So 

this.jobExecDetails.domain = "";
this.jobExecDetails.study = "";

will do what you want. Here a Stackblitz to be more clear: https://stackblitz.com/edit/angular-f6j8q6?file=src%2Fapp%2Fapp.component.ts

Upvotes: 2

Vivek Kumar
Vivek Kumar

Reputation: 5040

Can you try this

 public reset(jobExecDetails): void {
    this.jobExecDetails.domain = '';
    this.jobExecDetails = Object.assign({}, this.jobExecDetails);
  }

Upvotes: 0

Related Questions