提交后删除验证器

Question

我创建了两个文本框，一个用于标题，另一个用于名称。

如果文本框未填写，我正在使用验证，因此仅在两个文本框都填写时才提交信息。

我的问题是提交后我尝试清除变量的值，并在清除该值时出现验证消息。

有没有一种方法可以成功提交并清除变量的值，而不会出现验证器？

DEMO

html

<div style="margin-top:16px;width:50%">
    <dx-text-box placeholder="title..." [showClearButton]="true" [(ngModel)]="title">
        <dx-validator>
            <dxi-validation-rule type="required" message="Insert Title">
            </dxi-validation-rule>
        </dx-validator>
    </dx-text-box>
</div>
<div style="margin-top:16px;width:50%">
    <dx-text-box placeholder="name..." [showClearButton]="true" [(ngModel)]="name">
        <dx-validator>
            <dxi-validation-rule type="required" message="Insert Name">
            </dxi-validation-rule>
        </dx-validator>
    </dx-text-box>
</div>

<dx-button text="Submit" [useSubmitBehavior]="true" (onClick)="Save()"></dx-button>

.ts

title: string;
name: string;

Save(){
  if(this.title == "" || this.title == undefined || this.name == "" || this.name == undefined){
  }
  else{
    alert("Sucess !!");
    this.title = "";
    this.name = "";
  }
}

问题

在这里，我填写了文本框并成功提交。我清除了变量的值，但是这样做时，验证器被激活，而实际上一切都应该处于初始状态：（

Answer 1

作为快速的解决方法，您可以将模板包装在表单中，然后使用该模板检查其是否原始，以便知道是否显示验证器消息。然后，您可以重置表单（通过ViewChild（）将其导入到组件中之后），而不是为属性分配空字符串。

但是，这确实像是黑客，因为您使用的工具箱应该自动知道这一点。如果没有，那么为什么要麻烦使用它。

此外，我建议您也开始阅读Angular Reactive Forms。

无论如何，我在Stackblitz中附加了建议的更改。

祝您项目顺利！

Answer 2

这是我通常在提交后清除所有验证器的一种技巧。

  @ViewChildren(DxValidatorComponent) validatorViewChildren: QueryList<DxValidatorComponent>;

  private clearDxValidators = () => {
    this.validatorViewChildren.toArray().map(ref => {
      ref.instance.reset();
    })
  }

详细了解reset()