提交表单时清除验证消息

Question

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

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

问题

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';（提交后不要更改选项卡）文本框被成功清除。如果您更改选项卡然后 return 到带有文本框的选项卡，将始终显示验证消息。

Answer 1

似乎该字段处于“触摸模式”，因为该值以双向绑定的方式存储在名称中。

我已经试过了：

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

提交表单时清除验证消息

Clear validation message when the form is submitted

html

forms

typescript

devextreme

angular