CODEWITHSUNDEEP
typescriptangular-reactive-formsformgroupsnebular
Cruiser
Cruiser

Reputation: 35

nb-select is not clearing selection on form.reset

I had built a reactive form which consists of nb-select. I am using nebular theme. When i reset my form, everything is getting reset except the selection. It is holding the current value.

HTML code

<form [formGroup]="form">
 <div class="form-group row">
    <label for="title" class="label col-sm-3 form-control-label">Title :</label>
      <div class="col-sm-9">
        <nb-selectc id="title" formControlName="title" placeholder="Select">
           <nb-option *ngFor="let title of Title" [value]="title">{{ title }}</nb-option>
         </nb-select>
       </div>
  </div>

   <div class="form-group row">
    <label for="name" class="label col-sm-3 form-control-label">Name :</label>
      <div class="col-sm-9">
       <input type="text" nbInput fullWidth id="name" placeholder="Name" formControlName="name"
          class="form-control"[ngClass]="{'is-invalid': f.name.errors && f.name.touched}"/>
       <div *ngIf="f.name.errors && f.name.touched" class="invalid-feedback">
          <div *ngIf="f.name.errors.required">Name is required</div>
       </div>
      </div>
   </div>

   <button nbButton (click)="resetForm(form)">Reset</button>

</form

My ts code is:

Title: any = ["Mr.", "Ms.", "Mrs."];
this.appointmentForm = this.fb.group({
      title: new FormControl(""),
      name: new FormControl("", [Validators.required]),
});

resetForm(form: FormGroup) {
 form.reset()
}

I want the select to clear its selection

Upvotes: 0

Views: 2273

Answers (3)

Loz
Loz

Reputation: 141

In my case I had a dropdown where sometimes the underlying value would have to be cleared and the dropdown disabled. While the value of the dropdown was cleared, the text of this value remained visible in the dropdown.

The way to get rid of this persisting text was to include an empty value in the nb-select, e.g:

// Component
public emptyItem = new OptionObject();

// Template
<nb-select [(ngModel)]="selectedOption" fullWidth>
    <nb-option *ngFor="let item of availableItems" [value]="item">{{item.description}}</nb-option>
    <nb-option *ngIf="(availableItems?.length ?? 0) === 0" [value]="emptyItem"></nb-option>
</nb-select>

To avoid having the empty value show up along with the real possible values, I added the *ngIf so it's used only when there are no real values to be displayed in the dropdown (at which point it's disabled so the empty value doesn't matter).

Upvotes: 0

Udara Seneviratne
Udara Seneviratne

Reputation: 2493

I had a little bit different scenario. In my case, I needed to reset only the nb-select component in my form, not the whole form. I did it using the form patch operation

.ts file

performanceAction: FormGroup;
this.performanceAction.patchValue({
            target: []
        });

.HTML file

<div class="row">
   <div class="col-md-12 form-group">
      <label>Email Lists</label>
      <nb-card>
         <nb-select
           formControlName="target"
           placeholder="Email Lists"
           multiple
         fullWidth>
           <nb-option
             *ngFor="let emailList of emailLists"
             value="{{ emailList.id }}">
             {{ emailList.name }}
           </nb-option>
         </nb-select>
      </nb-card>
   </div>
</div>

Upvotes: 0

Sravan Kumar
Sravan Kumar

Reputation: 632

Instead of clearing the form, by writing form.reset() call ngOnInit(). This will clear everything. Its, refreshing the component

Upvotes: 2

Related Questions