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

У меня такой код:

    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;
 }
 };

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


javascript angular angular-reactive-forms angular2-forms angular-validation
person learner    schedule 17.01.2020    source источник
comment
Если возможно, предоставьте демонстрацию stackblitz! где я / мы можем воспроизвести проблему / текущее поведение   -  person Prashant Pimpale    schedule 17.01.2020
comment
Для этого вы можете написать специальную директиву.   -  person Nicholas K    schedule 17.01.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете создать собственный валидатор следующим образом:

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 }))
person Mustafa    schedule 20.01.2020

arrow_upward
-1
arrow_downward

Почему вы создаете свою собственную логику минимума и максимума 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 }">
person Fahad Hassan    schedule 17.01.2020
comment
материал еще включал цвет границы. Если вы не используете ввод материала, иначе это обычный ввод, Angular все же включает класс ng-invalid, поэтому используйте этот класс и удалите [ngClass], см. angular.io/guide/form-validation#control-status-css-classes - person Eliseo; 17.01.2020