Как выполнить минимальную и максимальную проверку в angular реактивных формах? - PullRequest
Новая
       47

Как выполнить минимальную и максимальную проверку в angular реактивных формах?

1 голос
/ 17 января 2020

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

    constructor() { 
this.feedbackForm = new FormGroup({
  suggestedAScore: new FormControl('', [Validators.pattern(/^[0-9]+$/),Validators.required, Validators.maxLength(5), Validators.minLength(5)]),
  minScore: new FormControl('', [Validators.pattern(/^[0-9]+$/),Validators.required,Validators.minLength(1),Validators.maxLength(1)]),
  maxScore: new FormControl('', [Validators.pattern(/^[0-9]+$/),Validators.required,Validators.minLength(1),Validators.maxLength(1)])
});
this.feedbackForm.setValidators(this.minMaxValidator());
 }




public minMaxValidator() : ValidatorFn{
return (group: FormGroup): ValidationErrors => {
  const min = group.controls['minScore'];
  const max = group.controls['maxScore'];
  var changedValue;
  if (min.value && max.value) {
    if (this.prevMinVal && (this.prevMinVal === min.value)) {
      changedValue = max;
      this.errorMessage = 'Max value should be greater than Min value';
    } else {
      changedValue = min;
      this.errorMessage = 'Min value should be lesser than Max value';
    }
    this.prevMinVal = min.value;
    if (min.value >=  max.value) {
      changedValue.setErrors({notEquivalent: true});
    } else {
      min.setErrors(null);
      max.setErrors(null);
    }
  };
 // this.isFeedbackFormValid();
    return;
 }
 };

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

Ответы [ 2 ]

0 голосов
/ 20 января 2020

Вам может понадобиться создать собственный валидатор, например: 

const RangeValidator: ValidatorFn = (fg: FormGroup) => {
  const start = fg.get('min').value;
  const end = fg.get('max').value;
  return start !== null && end !== null && parseFloat(start) < parseFloat(end)
    ? null
    : { range: true };
};

В вашем файле ts при создании формы вы должны предоставить валидацию в полной форме, чтобы получить оба изменения входных значений 

this.formbuilder.group({
      min: [null, [//Your Validation for number/decimal]],
      max: [null, [//Your Validation for number/decimal]]
}, { validator: RangeValidator }))
0 голосов
/ 17 января 2020

Почему вы создаете свои собственные логи c, минимальные и максимальные validators, когда angular обеспечивает min и max собственную проверку.

Когда вы устанавливаете проверку в вашем FormControl, чтобы вы могли использовать только одно условие в вашем component.hmtl, как это 

 <mat-error *ngIf="feedbackForm.controls.minScore.hasError('minlength')">
    Your error message here. 
  </mat-error>

Я только что показал вам пример того, как вы можете показывать ошибки условно используя validators.

Вы можете создать класс css, который сделает ваш ввод красным, вот так 

.error{border-color : red}

А внутри вашего html вы можете сделать это следующим образом. 

<input type="text" formControl="minScore" [ngClass]="{'error' :(feedbackForm.get('minScore').touched || feedbackForm.get('minScore').dirty) && !feedbackForm.get('minScore').valid }">
...