Рубрики
Без рубрики

Мощность RxWebvalidators.

Краткое описание RXWebvalidaters, используемых для выполнения валидаций в угловых реактивных формах.

Автор оригинала: Ushmi Dave.

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

Вот как выступающие проверки могут быть выполнены очень интуитивно понятным, простым и несчастным способом. В этой статье я покажу некоторые из самых полезных случаев валидаций в угловых реактивных формах, которые теперь могут быть сделаны легко …

Мы сталкиваемся с большим количеством случаев использования, когда нам нужно применить проверку на основе некоторого входного значения пользователя. Давайте понять разницу между и без Rxwebvalidators.

Без rxwebvalidators.

  this.personForm = this.formBuilder.group({
    firstName : ['', Validators.required],
    lastName : ['', conditionalValidator(
      (()=> this.isValidationForLastName === true),
      Validators.required
    )]
  })

  function conditionalValidator(condition: (()=> boolean), validator : ValidatorFn): ValidatorFn {
    return (control : AbstractControl):{[key:string]:any} => {
      if(! condition()){
        return null;
      }
      return validator(control);
    }
  }

С rxwebvalidators

Состояние применяется при инициализации FormControl, используя Сохранениеэкпрессия имущество. Пример: открыто

Это требует создания пользовательской функции для приложения условия и использования его во время FormControl Инициализация.

this.personForm = this.formBuilder.group({
  firstName: ['', RxwebValidators.required()],
  lastName: ['', RxwebValidators.required({ conditionalExpression: (x, y) => x.firstName == "Bharat" })]
})

Этот подход заключается в уникальной проверке значения на FormControl внутри формара.

Без rxwebvalidators.

uniqueValidator(control: AbstractControl) {
      const name = control.get('name').value;
  

    if (control.get('name').valid) {
      const isNameUnique = this.companies.map(company => company.name).some(value => value === name);

      if (!isNameUnique) {
        control.get('name').setErrors({unavailable: true});
      }
    }
    }

    this.companyFormGroup = this.fb.group({
      name: [null, Validators.required],
      emailAddress: [null, Validators.compose([Validators.required, Validators.email])]
    }, {validator: this.uniqueValidator.bind(this)});

С rxwebvalidators

Самый простой подход к выполнению уникальной проверки дан RxWebValidators. Пример: открыто

this.employeeFormGroup = this.formBuilder.group({
  fullName: [''],
  skills: this.formBuilder.array([
    this.getSkillFormGroup()
  ])
});
}

addSkill(){
  let skillsArray = this.employeeFormGroup.controls.skills;
  skillsArray.push(this.getSkillFormGroup());
}

getSkillFormGroup(){
  return this.formBuilder.group({
    skillName: ['', RxwebValidators.unique()]
  })
}

Наиболее распространенным сценарием валидации сравнения является паролем и подтверждение сравнения паролей

Без rxweb.

CheckPasswordfield Пользовательская функция

this.myForm = this.fb.group({
  password: ['', [Validators.required]],
  confirmPassword: ['']
}, {validator: this.checkPasswords })

checkPasswords(group: FormGroup) { // here we have the 'passwords' group
  let pass = group.get('password').value;
  let confirmPass = group.get('confirmPass').value;

  return pass === confirmPass ? null : { notSame: true }     
}

С rxweb.

Использование FieldName Свойство встроенного валидации сравнения

Пример: открыто

this.userFormGroup = this.formBuilder.group({
  password:['',], 
  confirmPassword:['', RxwebValidators.compare({fieldName:'password' })], 
});

В RXWEBVALDATS в строке, DateIme, Numeric, файле и массиве, DateIme, Numeric, файле и массиве, DateIme, Numeric, File и Array. Использовать RXWebValidators Установить Использование команды ниже:

npm i @rxweb/reactive-form-validators

Чтобы узнать больше см. RXWebio Документация раздел

Читайте ещё по теме: