提交后移除验证器

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

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

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

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

阅读更多关于reset()

Answer 2

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

不过，这确实有点像 hack，因为您使用的工具包应该自动知道这一点。如果没有，那为什么还要使用它。

另外，我建议你也开始阅读Angular Reactive Forms。

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

祝你的项目好运！