angular - 提交后删除验证器

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() 的信息