How to clear input control inside popup while initializing

[divakar]

Hi Team , 

 We are using the EJ1 All components in Angular 4 with typescript.

I am new to Angular and Synfusion , In My project , We are using EJdialog.

In my project , we have scenorio , adding values by using ejdialog , After adding values and try to add another value in dialog means old value not clearing .

Even do i was clearing the model value , is not clearing .

I have sharing the my code as follows ,

    <ej-dialog id="Correctiveactiondialog" title="Corrective Action" [actionButtons]="actionButtons" [enableResize]="false" [showOnInit]='false' width="250%" [isResponsive]='true'

               containment='#parent' (close)="onCorrectiveClose($event)">

        <form #corrective="ngForm" ng-submit="addSecCorrective(corrective)">

            <div class="panel-group">

                <div class="row mfg-top panel panel-default">

                    <div class="row">

                        <div class="col-lg-12  mfg-top">

                            <div class="row">

                                <div class="col-lg-12">

                                    <div class="col-lg-3">

                                        <label class="label_size">Responsible Name<span class="red">*</span></label>

                                    </div>

                                    <div class="col-lg-5">

                                        <input class="form-control" id="txtResponsibleName" type="text" name="responsiblename" #nameResponsibleName="ngModel"

                                               ej-autocomplete [fields]="fields" width="200px" [(ngModel)]="safetycorrectiveevent.responsibleName" [dataSource]="userdetail" watermarkText="Enter Responsible Name"

                                               required autocomplete="off" />

                                        <span *ngIf="nameResponsibleName?.touched && !nameResponsibleName.valid" class="validationmessage" style="color:red">

                                            Responsible Name is Required!

                                        </span>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-lg-12">

                            <div class="col-lg-3">

                                <label class="label_size">Preliminary Corrective Action Date<span class="red">*</span></label>

                            </div>

                            <div class="col-lg-8">

                                <div class='input-group date'>

                                    <input type="text" [(ngModel)]="safetycorrectiveevent.correctiveActDate" name="correctiveActDate" id="correctiveActDate" #nameCorrectiveActDate="ngModel" width="200px" watermarkText="Enter datetime" ej-datetimepicker required autocomplete="off">

                                    <span *ngIf="nameCorrectiveActDate?.touched && !nameCorrectiveActDate.valid" class="validationmessage" style="color:red">

                                        Prelimenary Corrective Action Date is Required!

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                    <br />

                    <div class="row">

                        <div class="col-lg-12">

                            <div class="col-lg-3">

                                <label class="label_size">Corrective Action Closure Date<span class="red">*</span></label>

                                <div class="col-lg-12 col-md-12 divClr" style="font-size:12px">(Filed in date when action completed)</div>

                            </div>

                            <div class="col-lg-8">

                                <div class='input-group date'>

                                    <input type="text" [(ngModel)]="safetycorrectiveevent.confCorrectiveActCloseDate" name="confCorrectiveActCloseDate" #nameConfCorrectiveActCloseDate="ngModel" width="200px" id="datetimepick" watermarkText="Enter Corrective Action Date" ej-datetimepicker required autocomplete="off">

                                    <span *ngIf="nameConfCorrectiveActCloseDate?.touched && !nameConfCorrectiveActCloseDate.valid" class="validationmessage" style="color:red">

                                        Corrective Action Closure Date is Required !

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-lg-12">

                            <div class="col-lg-3">

                                <label class="label_size">Prelimenary Action Description<span class="red">*</span></label>

                            </div>

                            <div class="col-lg-9" style="margin-left:-5px">

                                <div class="radio radio-info radio-inline">

                                    <textarea class="form-control" name="correctiveActDesc" #nameCorrectiveActDesc="ngModel" [(ngModel)]="safetycorrectiveevent.correctiveActDesc" watermarkText="Enter Prelimenary Action Description" style="height:90px;width:300px;margin-left:-4%;" watermarkText="Enter Prelimenary Action Description" required autocomplete="off"></textarea>

                                    <!--<div class="col-lg-12 col-md-12 divClr" style="font-size:12px"> Filed limit to 700 English characters</div>-->

                                    <span *ngIf="nameCorrectiveActDesc?.touched && !nameCorrectiveActDesc.valid" class="validationmessage" style="color:red">

                                        Prelimenary Action Description is Required !

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-lg-12  mfg-top">

                            <div class="row">

                                <div class="col-lg-12" style="text-align:center">

                                    <button class="btn btn-danger  btn-space pull-right" style="margin-left:5px;width:100px;" (click)="btnClick($event)">Cancel</button>

                                    <button class="btn btn-success btn-space pull-right" style="width: 100px;margin-left:10px;" (click)="addeventcorrective(safetycorrectiveevent)" [disabled]="corrective.invalid">Add</button>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </form>

    </ej-dialog>

Please help me on this solve the issue. I am waiting for your fast reply 

Thanks,

Divakaran N

[Christopher Issac Sunder K]

Hi Divakaran N, 

Thank you for contacting Syncfusion support. 

This scenario can be achieved by setting the model value as null when opening the Dialog in the page. By using the Dialog open event we can take the other input controls instance and then set then as null. Here are the code for your reference, 

View: 

  <ej-dialog id="Correctiveactiondialog" title="Corrective Action" [actionButtons]="actionButtons" [enableResize]="false" [showOnInit]='false' width="250%" [isResponsive]='true' 

     containment='#parent' (open)="onDialogOpen($event)"> 

</ej-dialog> 

TS: 

onDialogOpen(args) { 

//set all the inputs value as null using the setmodel 

        $('#txtResponsibleName').ejAutocomplete("instance").option({value: null}) 

        $('#correctiveActDate').ejDateTimePicker ("instance").option({value: null}) 

        $('#datetimepick').ejDateTimePicker ("instance").option({value: null}) 

      } 

Please let us know if you need further assistance. 

Thanks, 

Christo