Как установить пользовательское сообщение об ошибке в форму в angular

Question

У меня есть следующий код в моем компоненте:

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

Я получаю сообщение на входе как 'minRange is invalid'. Но я хочу отобразить сообщение об ошибке как 'P

'Please enter a 5 digit value'

Как .setErrors как я могу установить сообщение об ошибке в formcontrol. Может ли кто-нибудь помочь мне. Спасибо.

Answer 1

Реактивная форма в Angular позволяет иметь пользовательских ошибок и пользовательских проверок . Ниже приведен пример:

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>

Component.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 2

 <form  [formGroup]="form">
      <input formControlName="userName" > 
 <div *ngIf="form.controls['userName'].errors?.minlength">
         Please enter a 5 digit value
    </div> 
    </form>

в файле ts необходимо создать FormGroup с валидаторами 1.declare

 form:FormGroup

инициализация формы внутри ngOninit

this.form = this.formBuilder.group ({userName: ['', Validators.minLength (5)],});

оператор импорта

import {FormBuilder, FormGroup, Validators} из '@ angular / forms';

Answer 3

Чтобы проверить минимальную длину в реактивной форме, мы можем использовать атрибут minlength с formControlName следующим образом:

<form  [formGroup]="form">
  <input formControlName="userName" minlength="5"> < ---
</form>
<div *ngIf="userName.errors?.minlength">
     Please enter a 5 digit value
</div> 

нам нужно использовать Validators.minLength с FormControl при создании FormGroup. app.component.ts:

 form = new FormGroup({
    userName: new FormControl('', Validators.minLength(5)) < ---
  });

  get userName() {
    return this.form.get('userName');
} 

https://stackblitz.com/edit/angular-ngvbzn?file=src%2Fapp%2Fapp.component.html

Надеюсь, это поможет!

Answer 4

Вы можете использовать шаблон, чтобы ограничиться только числом 5 di git.

<input type="number" [(ngModel)]="minRange" name="minRange" pattern="^[0-9]{5}$"> required>

<div *ngIf="minRange.errors?.pattern">
    Please enter a 5 digit value.
</div>

Answer 5

Это установлено в шаблоне HTML. Я подозреваю, что у вас есть код, который отображает указанное сообщение.

Попробуйте:

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

, если вам нужна проверка пользовательской формы, возможно, вы также можете попробовать custom валидаторы формы .