3

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

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

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

有没有办法成功提交并清除变量的值，验证器不出现？

演示

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 = "";
  }
}

问题

图片

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

4

2 回答 2

1

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

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

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

阅读更多关于reset()

于 2020-05-29T22:42:44.440 回答
0

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

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

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

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

祝你的项目好运！

于 2020-05-29T11:17:20.400 回答