时间戳

首页 > 解决方案 > 角度事件处理，使用模糊和单击相同方法的正确做法？

javascript - 角度事件处理，使用模糊和单击相同方法的正确做法？

问题描述

这可能是一个令人困惑的问题，我在 Angular 中有一个验证方法来检查我是否填充了我的选择，基本上是对值的一个小检查。现在我看到，如果我通过 Tab 键通过键盘切换表单，则 (blur) 事件开始播放，如果我使用 (click) 处理程序，则检查鼠标单击事件。

因此，我想与社区核实这是否是正确的做法，如果不是，那么如果我同时使用这两个事件并在它们上调用相同的方法，那将是更好的方法。

请在下面找到代码示例。

下面的代码在单击和模糊时都执行，然后它尝试检查值，如果值不存在，则显示 contractValidationMessage 并带有一些错误消息，反之亦然。

<select
                      class="form-control dropdown ng-pristine ng-valid ng-touched"
                      [(ngModel)]="clientModel.contract.signedBy" #contractSignedBy
                      (blur) = 'validateContractSignature(contractSignedBy)'
                      (click) = 'validateContractSignature(contractSignedBy)'
                      >
                      <option hidden value="" disabled selected>Singed by</option>
                        <option *ngFor="let user of userRoles">{{user}}</option>
                    </select>
                    <div class="validation-msg">{{contractValidationMessage}}</div>
            </div>

只是想了解这是否正确

这是需要时的功能

validateContractSignature(signature){
    if(signature.value == ""){
      this.signedContract = false;
      this.contractValidationMessage = "Please select signing person's name";
    }
    else{
      this.signedContract = true;
      this.contractValidationMessage = "";
    }
  }

标签： javascriptangular

解决方案

我 Angular 标准验证器将在您键入时运行。它们甚至会在您输入任何内容之前运行，因此表单通常在您输入任何内容之前就充满了错误。通常你不需要像你一样使用模糊：

(blur) = 'validateContractSignature(contractSignedBy)'

在您的情况下，您似乎只测试了一个必需的。Angular 对此有一个标准的验证器。

<select required></select>

看看：https ://jasonwatmore.com/post/2018/11/10/angular-7-template-driven-forms-validation-example

如果您想要更多地控制表单，您应该检查 ReactiveForms 而不是 Templet 驱动的表单

推荐阅读