提交表单后清除确认消息

问题描述

我创建了一个包含文本框的表单。如果您尝试在不填写文本框的情况下提交表单，则会显示一条验证消息。

如果文本框已满，我打算在提交表单时清除其所有内容。我的问题是，提交后我可以清理文本框而不会显示验证消息，但是，当我切换到另一个选项卡然后返回到该选项卡时，将显示该验证消息。我该如何解决？

问题

DEMO

html

<div class="container">
    <div class="tab-slider--nav">
        <ul class="tab-slider--tabs">
            <li class="tab-slider--trigger" [class.active]="viewmode == 'tab1'" rel="tab1" (click)="viewmode ='tab1'">
                Tab 1 - list</li>
            <li class="tab-slider--trigger" [class.active]="viewmode == 'tab2'" rel="tab2" (click)="viewmode ='tab2'">
                Tab 2 - Create</li>
        </ul>
    </div>
    <div class="tab-slider--container" [ngSwitch]="viewmode">
        <div id="tab1" class="tab-slider--body" *ngSwitchCase="'tab1'">
            LIST
        </div>
        <div id="tab2" class="tab-slider--body" *ngSwitchCase="'tab2'">
            <form (submit)="SaveGroup($event)" style="width: 100%; height: 92%;">
                <dx-validation-group #CreateGroup>
                    <div style="width: 100%; height: 100%; overflow: auto;">
                        <div style="
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 100%;
        ">
                            <span class="title1">Name</span>
                            <div class="mytextBox">
                                <dx-text-Box [(ngModel)]="Name" [ngModelOptions]="{standalone: true}"
                                    placeholder="Enter Name">
                                    <dx-validator>
                                        <dxi-validation-rule type="required" message="Name is required">
                                        </dxi-validation-rule>
                                    </dx-validator>
                                </dx-text-Box>
                            </div>
                        </div>
                    </div>
                    <div style="padding-top: 10px;">
                        <dx-button class="customButtom" type="submit" id="button" text="Save"
                            [useSubmitBehavior]="true">
                        </dx-button>
                    </div>
                </dx-validation-group>
            </form>
        </div>
    </div>
</div>
@H_404_18@

.TS

  SaveGroup(e) {
    let self = this;
    self.viewmode = 'tab1';
        self.validationGroup1.instance.reset();
  }
@H_404_18@

如果您在self.viewmode = 'tab1';@H_404_18@行中添加注释（提交后请勿更改选项卡），则文本框已成功清除。如果更改选项卡，然后返回到带有文本框的选项卡，则始终显示验证消息。

解决方法

似乎该字段处于“触摸模式”，因为该值以两种方式存储在Name中。

我已经尝试过了：

SaveGroup(e) {
    const savedNameValue = this.Name;
    
    this.validationGroup1.instance.reset();
    this.Name = null;
    this.viewMode = 'tab1';
}