Reputation: 3
I am trying to clear the form values after a button click. The following shows the HTML and Angular Component. On the same button click I want the values to reset or refresh. Thanks.
onAddClientNeeds() {
this.listOfNeedsAssessment.push(this.needsAssessment.value);
this.isNeedsAssessmentAdded = true;
}
<div [formGroup]="needsAssessment" class="main-container">
<div class="header-section">
<div class="flex-container">
<div class="edit-section">
<p class="edit-title">Mental Health</p>
<div class="edit-body">
<select class="form-control" (change)="onchange($event)" (blur)="onchange($event)" id="mental_health">
<option selected value="0">Select Option</option>
<option *ngFor="let mentalHealth of mentalHealthList" value={{mentalHealth.Id}}>{{mentalHealth.Item}}</option>
</select>
</div>
</div>
<div class="edit-section">
<p class="edit-title">Persistant Pain</p>
<div class="edit-body">
<select class="form-control" (change)="onchange($event)" (blur)="onchange($event)" id="persistant_pain">
<option selected value="0">Select Option</option>
<option *ngFor="let persistantPain of persistantPainList" value={{persistantPain.Id}}>{{persistantPain.Item}}</option>
</select>
</div>
</div>
<div class="button-select">
<button type="button" class="create-button" (click)="onAddClientNeeds()">Add Needs Assessment Outcomes</button>
</div>
</div>
</div>
Upvotes: 0
Views: 2546
Reputation: 1165
Just call the function reset()
onAddClientNeeds() {
if (this.needsAssessment.valid) {
this.needsAssessment.reset();
}
}
Upvotes: 1