如何将自定义错误消息设置为有角度的表单

Question

我的组件中有以下代码：

 if (form.controls['minRange'].hasError('min')) {
        form.controls['minRange'].setErrors({ min: true });
 }

我在输入中收到消息“minRange 无效”。但我想将错误消息显示为“P”

'Please enter a 5 digit value'

像 .setErrors 如何在 formcontrol 中设置错误消息。任何人都可以帮助我。谢谢。

Answer 1

2021/22+ 答案。不要直接访问表单控件/错误。现在有一些函数可以做到这一点。

在 HTML 中，类似这样的内容与 required 结合在一起。

这是我们的自定义错误键。

loginForm.get('电子邮件')?.getError('无效')

<span
      *ngIf="
        !loginForm.get('email')?.valid &&
        (loginForm.get('email')?.touched || loginForm.get('email')?.dirty)
      "
    >
      {{
        loginForm.get('email')?.hasError('required')
          ? 'Username Required'
          : loginForm.get('email')?.getError('invalid')
      }}

</span>

当API调用发生错误时在组件中

 this.loginForm.get('email')?.setErrors({ invalid: 'Invalid Username' });

'invalid' 是关键，它的值是我们的错误消息。

就是这样！

Answer 2

TS：

if (form.controls['minRange'].hasError('min')) {
   form.controls['minRange'].setErrors({ incorrect: true, message: 'Please enter a 5 digit value'});   
}

html:

<ion-text color="danger">{{form.controls['minRange'].errors.message}}</ion-text>

Answer 3

Angular 中的 Reactive Form 允许您自定义错误和自定义验证。下面是一个例子：

HTML：验证输入是否为数字。

<form  [formGroup]="form">
  <input formControlName="age" >
  <span *ngIf="form.controls.age.errors?.invalidNumber">   // <--- invalidNumber is the key
      Age should be a number
  </span>
</form>

组件.ts

 class TestComponent implements OnInit{
  form:FormGroup;

  ngOnInit(){
    this.createForm();
    this.listenToAgeChange();
  }

  createForm(){
    this.form = new FormGroup({
      age:new FormControl(null)
    })
  }

  listenToAgeChange(){
    this.form.controls.age.valueChanges.subscribe(age=>{
      if(isNaN(age)){
        this.form.controls.age.setErrors({invalidNumber:true})  // <--- Set invalidNumber to true 
      }else{
        this.form.controls.age.setErrors(null)
      }
    })
  }
}

Answer 4

它是在 HTML 模板中设置的。我怀疑你那里有一个代码可以呈现上述消息。

尝试：

  <input ...your input here ...>
  <div *ngIf="formcontrol.min">
    Please enter a 5 digit value
  </div>

如果您需要自定义表单验证，也许您也可以尝试自定义表单验证器。