首页 > 解决方案 > 用户离开字段后验证表单字段

问题描述

我想在用户离开字段后验证表单字段。我写了我的html如下

 <input type="text" onfocusout="validateIp()"formControlName="ip_address" (input)="onIpChange($event.target.value)" pattern="^[a-zA-Z0-9.]*$"class="form-control form-control-sm" id="IP_Address">

下面是我的打字稿代码

 validateIp(){
    
    console.log('validateIp is called');
  }

onfocusout 没有按预期工作。下面是我得到的错误

Uncaught ReferenceError: validateIp is not defined
    at HTMLInputElement.onfocusout 

我也尝试过 onblur 但事件没有被触发

标签: javascriptangulartypescriptformsonfocusout

解决方案


使用 ReactiveForms 时,可以验证 onBlur

this.form=new FormGroup({
  ip_address:new FormControl(null,{validators: Validators.required,
                                  updateOn: 'blur'})
})

或使用 formBuilder

this.form = this.fb.group({
    ip_address: ["", { validators: [Validators.required], updateOn: "blur" }],
});

推荐阅读