FormControl Как более точно настроить сообщение об ошибке для уточнения - PullRequest
Новая
       32

FormControl Как более точно настроить сообщение об ошибке для уточнения

0 голосов
/ 13 апреля 2020

После моего предыдущего вопроса моя цель - показать точное пользовательское сообщение об ошибке для ввода, поэтому вместо того, чтобы продвигать пользователя с помощью общей версии сообщения c, я хотел бы продвинуть его с помощью более конкретное c сообщение.

Например, если это числовое поле, и пользователю разрешено вводить цифры только в диапазоне от 30 до 40, поэтому, если пользователь ввел 41, чем вместо просто рекламировать его с помощью "Недействительный номер" Я хотел бы рекламировать его с помощью "Вы ввели слишком большое число" , и если он ввел 29, чем я хотел бы рекламировать его «Вы ввели малое число» .

Используя реактивный подход, я попытался сделать следующее:

app.component.html : 

<form [formGroup]="myForm">
  FooNumber: <input type="text" formControlName="fooNumber">
  <span *ngIf="!myForm.get('fooNumber').valid">Not valid number, please provide different value</span>
</form>

app.component.ts:

export class AppComponent implements OnInit {
  myForm: FormGroup;
  max = 40;
  min = 30;      

  ngOnInit() {
    this.myForm = new FormGroup({
      'fooNumber': new FormControl(null, [this.validateFunction.bind(this)])
    });        
  }
  validateFunction(control: FormControl): {[s: string]: boolean} {
    if (control.value > this.max || control.value < this.min)
      return {'notValidFooNumber': true};

    return null;
  }
}

1 Ответ

0 голосов
/ 13 апреля 2020

Ключевыми понятиями здесь является правильная работа с этим оператором возврата: return {'notValidFooNumber': true}; он возвращает пару ключ-значение, которая заполнит свойство списка errors объекта FormGroup.

* 1005 Свойство * errors является:

Объект, содержащий любые ошибки, сгенерированные при неудачной проверке, или ноль, если ошибок нет.

Таким образом, мы могли бы легко инициировать ошибки FormGroup с пользовательскими ключами, такими как 'MaxRuleValidation' и 'MinRuleValidation' со значением true, и выполнение ngIf с *ngIf="myForm.get('fooNumber').errors['MaxRuleValidation']" для каждого из ключей с пользовательским сообщением об ошибке.

app.component.ts:

validateFunction(control: FormControl): {[s: string]: boolean} {
  if (control.value > this.max)
    return {'MaxRuleValidation': true};        
  else if (control.value < this.min) 
    return {'MinRuleValidation': true};

  return null; // If there is no error at al the errors list should be null.
}

app.component.html:

<form [formGroup]="myForm">
  FooNumber: <input type="text" formControlName="fooNumber">
  <span *ngIf="!myForm.get('fooNumber').valid">Not valid foo number: 
    <span *ngIf="myForm.get('fooNumber').errors['MaxRuleValidation']">You have entered a number that is to big</span>
    <span *ngIf="myForm.get('fooNumber').errors['MinRuleValidation']">You have entered a number that is to small</span>
  </span>
</form>
...