CODEWITHSUNDEEP
angularangular-material
sundeep
sundeep

Reputation: 355

Need to Reset the dropdown values On button click

I need to reset the dropdown values, on click on Button.
In HTML I have one onResetClick() function. In .ts file i need to write the logic to reset the dropdwon.

Can Anyone help me with this?


    <div class ="space">
    <mat-form-field>
         <mat-label>Is this partner a PEP?</mat-label>
         <mat-error *ngIf="formGroup.get('PepPartner').hasError('required')">
            PEP Partner  is required
          </mat-error>
      <mat-select disableRipple  [(ngModel)]="PepPartner" formControlName="PepPartner">
          <mat-option ></mat-option>
        <mat-option value="1">Yes</mat-option>
        <mat-option value="2">No</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Does this partner blacklisted</mat-label>
      <mat-error *ngIf="formGroup.get('PepBlacklisted').hasError('required')">
          Partner blacklisted is required
        </mat-error>
      <mat-select disableRipple  [(ngModel)]="PepBlacklisted" formControlName="PepBlacklisted" >
        <mat-option ></mat-option>
        <mat-option value="1">Yes</mat-option>
        <mat-option value="2">No</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field >
        <input matInput placeholder="Blacklist(s)" >
      </mat-form-field>

      <div class="button-position">
          <div class="text-right pr-0 pb-2">
            <div class="btn-group">
              &nbsp;&nbsp;&nbsp;
              <button type="button" id="button1" mat-raised-button class="text-uppercase app-btn app-btn-

      primary-border app-color-primary"
                (click)="validateForm()">Save</button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button type="button" id="button2" mat-raised-button class="text-uppercase app-btn app-btn-

      primary-border app-color-primary"
                (click)="onResetClick()">Clear</button>
            </div>
          </div>
        </div>

Upvotes: 0

Views: 1127

Answers (4)

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

Here is working Example

<mat-form-field>
      <mat-label>Does this partner blacklisted</mat-label>
      <mat-error *ngIf="formGroup.get('PepBlacklisted').hasError('required')">
          Partner blacklisted is required
        </mat-error>
      <mat-select disableRipple  [(ngModel)]="PepBlacklisted" formControlName="PepBlacklisted" >
        <mat-option ></mat-option>
        <mat-option value="1">Yes</mat-option>
        <mat-option value="2">No</mat-option>
      </mat-select>
    </mat-form-field>

.TS

onResetClick()
{
 this.PepBlacklisted = undefined;
}

Upvotes: 0

Sudipto Mukherjee
Sudipto Mukherjee

Reputation: 945

First set a value in 

<mat-option ></mat-option>

change it to 

<mat-option value="0"></mat-option>

In case of ngModel simply set the variable value on reset

    <mat-select [(value)]="type">
                <mat-option value="all">All</mat-option>
                <mat-option value="online">Online Reg Copy</mat-option>
                <mat-option value="original">Original RC</mat-option>
            </mat-select>

onreset() {
  type="all" 
}

If you are using reactive form.You can set value of individual control using

this.formName.contols.controlName.setValue("0");

Incase you want to reset entire form

this.formName.reset();

Upvotes: 0

rafi muhammad
rafi muhammad

Reputation: 192

Try this:

this.PepBlacklisted = '';

Upvotes: 1

Shumail
Shumail

Reputation: 3143

First, you have to decide if you want to use template-driven forms or reactive forms. Don't use both together. In your code, you are using [(ngModel)] as well as formControlName together.

Now, for template driven forms with ngModel, you can use try this: 

onResetClick() {
  PepPartner = '';
  PepBlacklisted = '';
}

But if you want to reset the whole form, you can call reset on the form in your component. e.g. this.myForm.reset()

Upvotes: 1

Related Questions