Right now I have two textareas that appear conditionally through the *ngIf directive based upon the user selection entered earlier in a prior select box. It works great except the for the fact that if they go back and change the value of the select box the text areas switch accordingly but the previous value of the text area isn't erased it's just hidden from view.
I tried adding a function defined in my component binding to an onchange event to reset the value of the textbox hidden from view to an empty string but to no avail. The data is still persisting
<ss-multiselect-dropdown (onchange)=" resetdcn()" id="substatus"
*ngIf="ddlCorrespondenceStatus == 'M'" class="report-multiselect"
[options]="ddlCorrespondenceSubStatuses"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedCorrespondenceSubStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>
<ss-multiselect-dropdown (onchange)=" resetdcn()"
*ngIf="ddlCorrespondenceStatus == 'G'" class="report-multiselect"
[options]="ddlStatus"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>
</div>
</td>
<td>
<textarea (ngModelChange)="handleCorrespondenceDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'M'" id="txtDcn"name="txtDcn"
type="text"
placeholder="Correspondondence DCN " class="form-control input-md"
[(ngModel)]="txtCorrespondenceDcn"></textarea>
<textarea (ngModelChange)="handleClaimDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'G'" id="txtDcn" name="txtDcn"
type="text" placeholder="Claim DCN " class="form-control input-md"
[(ngModel)]="txtDcn"></textarea>
The problem was that the function wasn't being called correctly, not the function itself. It needed to be (ngModelChange) ="resetdcn()"