使用Angular 2重置模态中的表单

时间:2016-09-08 12:08:37

标签: html forms angular

嘿,我现在已经看了这个问题2小时甚至更多,所以请不要将此标记为重复。
这是问题,我有我的ng2-bs3模式,即使我在保存按钮上的自定义操作也能正常工作。问题是,如果您按取消并再次打开它仍然会选中所选的东西。我希望每次打开它并在线时都会得到一个新表格我发现一个帖子说它只是一个简单的Form.reset()。但我无法这样做。

到目前为止我制作的模态。

<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>

我希望你能帮助我或给我一些有用的信息 TY Bono

1 个答案:

答案 0 :(得分:1)

1.在postEvent函数结束时添加 this.etype = null

2.您手动为取消事件创建onclick函数并添加 this.etype = null