CODEWITHSUNDEEP
htmlformsangular
Bono
Bono

Reputation: 181

Reset Form in Modal with Angular 2

Hey there I have now been look at this problem for 2h or even more so please dont mark this a dupplicate.
Here is the Problem, I have my ng2-bs3-modal that works fine even with my custom action on the Save Button. The problem is, if you press cancel and open it again the selected thing are still selected. I would like to get a new Form every time you open it and online I found a post saying that all there is to it is a simple Form.reset(). But I am unable to do so.

Here the Modal I made so far.

<modal #modalEventCreate>
    <modal-header [show-close]="true">
        <h4 class="modal-title">Create new event</h4>
    </modal-header>
    <modal-body>
        <div class="form-group">
            <form ngNoForm>
            Event Type
                <select class="btn btn-default align-center selection" [(ngModel)]="etype">
                    <option value="maintenance">Maintenance</option>
                    <option value="deactivate">Deactivate</option>
                </select>
            Server
                <select class="btn btn-default align-center selection" [(ngModel)]="server">
                    <option *ngFor="let server of servers" [ngValue]="server.id">{{ server.name }}</option>
                </select>
            Start
                <input class="form-control selection" id="datetimepickerStart" type="datetime-local" [(ngModel)]="sdate">
            End
                <input class="form-control" id="datetimepickerEnd" type="datetime-local" [(ngModel)]="edate">
            </form>
        </div>
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-default" (click)="postEvent()">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </modal-footer>
</modal>

I hope you can Help me or give me some helpfull information.
TY Bono

Upvotes: 2

Views: 1481

Answers (1)

jeeva
jeeva

Reputation: 406

1.At the end of postEvent function add this.etype=null.

2.You manually create a onclick function for cancel event and add this.etype=null.

Upvotes: 1

Related Questions