提交后如何清理"textarea"和输入？

Question

我正在使用一个Devextreme库(提及(。 有没有办法提交(单击"保存"按钮(以清除组件和其他输入的所有文本区域信息？

我已经测试了几件事，但没有成功，我什至无法清理组件的文本区域。

有人可以帮助我吗？

演示

法典

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input [(ngModel)]="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input [(ngModel)]="email" type="email" class="form-control">
</div>
<dx-html-editor (onValueChanged)="ment($event)"> 
<dxi-mention
valueExpr="text" 
displayExpr="text"
[dataSource]="employees"
></dxi-mention>
</dx-html-editor>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="Save()">Save</button>
</div>    
</div>
</div>
</div>

Answer 1

您应该获取实例/组件并重置值(如下所示(。

import { DxHtmlEditorComponent } from 'devextreme-angular';
@ViewChild(DxHtmlEditorComponent, {static: false}) dxHtmlEditor;
Save(){
this.name = null;
this.email = null;
this.dxHtmlEditor.instance.reset()
}

工作演示 在此处阅读更多内容