Clear validation message when the form is submitted

Question

I created a form that contains a textbox. If you try to submit the form without filling in the textbox, a validation message is displayed.

If the textbox is filled, I intend to clean all its content when submitting the form. My problem is that I can clean the textbox after submitting without the validation message appearing, however, when I switch to another Tab and then return to it, that validation message is displayed. How can I solve this?

PROBLEM

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>

.TS

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

If you comment this line self.viewMode = 'tab1'; (do not change the tab after submitting) the textbox is successfully cleared. If you change tab and then return to the one with the textbox, the validation message is always displayed.

Answer 1

It seems that field is in "touched mode" because the value is stored in two way binding in Name.

I have tried this :

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