nb-select is not clearing selection on form.reset

Question

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

Answer 1

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