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

Question

嘿，我现在已经看这个问题 2 小时或更长时间了，所以请不要将此标记为重复。
这是问题所在，我的 ng2-bs3-modal 即使使用保存按钮上的自定义操作也能正常工作。问题是，如果您按取消并再次打开它，所选的东西仍然被选中。每次打开它时我都想获得一个新的表单，我在网上发现一个帖子说它只是一个简单的 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>

我希望你能帮助我或给我一些有用的信息。
泰博诺

Answer 1

1.在postEvent函数末尾添加this.etype=null。

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