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
Instead of clearing the form, by writing form.reset()
call ngOnInit()
. This will clear everything. Its, refreshing the component