用户离开字段后验证表单字段答案

【问题标题】：Validate form field after user leaves the field用户离开字段后验证表单字段
【发布时间】：2020-10-27 07:38:49
【问题描述】：

我想在用户离开字段后验证表单字段。我写了我的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，但没有触发事件

【问题讨论】：

on* 属性应更改为括号变体（例如，onfocusout 应为 (focusout)）。

标签： javascript angular typescript forms onfocusout

【解决方案1】：

使用 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" }],
});

【讨论】：

【解决方案2】：

您似乎在一个 Angular 组件中，并且您正在尝试调用该组件的方法。

鉴于onIpChange 与validateIp 在同一个组件中定义，您必须将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">

到

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

【讨论】：

你使用的是formControl和pattern和input！！！，如果你使用的是ReactiveForms，验证器应该在创建FormControl时创建