Как проверить 2 поля с проверкой Minimum / Maximum сравнения в ionic3?

Question

При работе с группой реактивных форм, которая содержит 2 поля, таких как min и max, данные поступают из жестко закодированных данных массива.когда мы вводим значение в соответствующее поле, мы просто хотим показать, что минимальное значение должно быть больше, чем max

Answer 1

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

создать форму ниже

createForm() {
    this.personalDataForm = new FormGroup({
      fieldOne: new FormControl("", [Validators.minLength(5), Validators.maxLength(15)])
// ...
    });
  }

добавить проверки к вашему шаблону

<form [formGroup]="personalDataForm">
  <ion-row>
   <label class="lbl-lnu">fieldOne :</label>
   <input type="text" class="input-lnu" formControlName="fieldOne">
   <div class="form-control-feedback" *ngIf="personalDataForm.controls.fieldOne.errors && (personalDataForm.controls.fieldOne.dirty || personalDataForm.controls.fieldOne.touched)">
      <p class="error-msg" *ngIf="personalDataForm.controls.fieldOne.errors.minlength">Minimum length is 5</p>
      <p class="error-msg" *ngIf="personalDataForm.controls.fieldOne.errors.maxlength">Maximun length is 15</p>
   </div>
   </div>
 </ion-row>
</form>

, чтобы запустить проверку при отправке, используйте нижефункция

function isValid(): boolean {
  const valid = this.personalDataForm.valid
  if (!valid) { // if not valid fire validation
    Object.keys(this.personalDataForm.controls).forEach(field => {
        const control = this.personalDataForm.get(field);
        control.markAsTouched({ onlySelf: true });
      });
  }
  return valid; // if form data valid return true, otherwise false
}