我创建了两个文本框,一个用于标题,另一个用于名称。
如果文本框未填充,我正在使用验证,因此仅在两个文本框都填充时,才提交信息。
我的问题是,提交后我尝试清除变量的值,并在清除该值时出现验证消息。
是否有一种方法可以成功提交并清除变量的值,但不会出现验证器?
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 = "";
}
}
问题
在这里,我填写了文本框并成功提交。我清除了变量的值,但是这样做时会激活验证器,而实际上所有内容都应该处于初始状态:(
作为一种快速的解决方法,您可以将模板包装在表单中,然后使用该模板检查其是否原始,以便知道是否显示验证器消息。然后,您可以重置表单(通过ViewChild()将其导入组件后,而不是为属性分配空字符串)。
的确感觉像是黑客,因为您使用的工具箱应该自动知道这一点。如果没有,那么为什么要麻烦使用它。
此外,我建议您也开始阅读Angular Reactive Forms。
无论如何,我在Stackblitz中附加了我建议的更改。
祝您的项目好运!
这里是我通常用来在提交后清除所有验证器的技巧。
@ViewChildren(DxValidatorComponent) validatorViewChildren: QueryList<DxValidatorComponent>;
private clearDxValidators = () => {
this.validatorViewChildren.toArray().map(ref => {
ref.instance.reset();
})
}
阅读有关reset()的更多信息