提交表单后清除确认消息

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

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

问题

演示

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>

.TS

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

如果您对此行发表评论self.viewMode = 'tab1';（提交后不要更改选项卡），则将成功清除文本框。如果更改选项卡，然后返回到带有文本框的选项卡，则始终显示验证消息。