Проверка на основе выбора пользователя в большой форме

Question

У меня есть пользовательская форма, в которой у меня есть несколько полей и в зависимости от типа пользователя, я использовал угловые реактивные формы и хочу проверить мои поля

Вот мой код компонента ts:

export class AppComponent implements OnInit {

userformGroup: FormGroup;
        Types = [ "user","admin", "guest"];
type: string;

constructor(
    private formBuilder: FormBuilder){}

ngOnInit() {
 this.userformGroup = this.formBuilder.group({
      type: ['user'],
       userName : [''],
      firstName :[''],
      lastName :[''],
        email :[''],
        contactNumber :[''],
        licenseNo :[''],
        age:[''],
        birthDate :[''],
        city:[''],
        country:[''],
        zipCode :[''],
        countryCode:['']
        });
  }

    updateValidators() {
    if (this.type === 'user') {
      this.userformGroup.get('userName').setValidators([Validators.required]);
      this.userformGroup.get('firstName').setValidators([Validators.required]);
      this.userformGroup.get('lastName').setValidators([Validators.required]);
      this.userformGroup.get('email').setValidators([Validators.required]);
      this.userformGroup.get('contactNumber').setValidators([Validators.required]);
       this.userformGroup.get('licenseNo').setValidators([Validators.required]);
         this.userformGroup.get('age').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
       this.userformGroup.get('birthDate').setValidators([Validators.required]);
       this.userformGroup.get('city').setValidators([Validators.required]);
        this.userformGroup.get('country').setValidators([Validators.required]);
       this.userformGroup.get('zipCode').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
     this.userformGroup.get('countryCode').setValidators([Validators.minLength(3)]);
    }
      else if(this.type === 'admin')
    {
      this.userformGroup.get('userName').setValidators([Validators.required]);
      this.userformGroup.get('firstName').setValidators([Validators.required]);
      this.userformGroup.get('lastName').setValidators([Validators.required]);
      this.userformGroup.get('email').setValidators([Validators.required]);
      this.userformGroup.get('contactNumber').setValidators([]);
       this.userformGroup.get('licenseNo').setValidators([Validators.required]);
         this.userformGroup.get('age').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
       this.userformGroup.get('birthDate').setValidators([]);
       this.userformGroup.get('city').setValidators([Validators.required]);
        this.userformGroup.get('country').setValidators([]);
       this.userformGroup.get('zipCode').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
     this.userformGroup.get('countryCode').setValidators([Validators.minLength(3)]);    
    }
      else if(this.type === 'guest')
    {
      this.userformGroup.get('userName').setValidators([]);
      this.userformGroup.get('firstName').setValidators([]);
      this.userformGroup.get('lastName').setValidators([Validators.required]);
      this.userformGroup.get('email').setValidators([]);
      this.userformGroup.get('contactNumber').setValidators([]);
       this.userformGroup.get('licenseNo').setValidators([Validators.required]);
         this.userformGroup.get('age').setValidators([]);
       this.userformGroup.get('birthDate').setValidators([]);
       this.userformGroup.get('city').setValidators([Validators.required]);
        this.userformGroup.get('country').setValidators([]);
       this.userformGroup.get('zipCode').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
     this.userformGroup.get('countryCode').setValidators([Validators.minLength(3)]);    
    }
     this.userformGroup.get('userName').updateValueAndValidity();
    this.userformGroup.get('firstName').updateValueAndValidity();
    this.userformGroup.get('lastName').updateValueAndValidity();
    this.userformGroup.get('email').updateValueAndValidity();
    this.userformGroup.get('contactNumber').updateValueAndValidity();
    this.userformGroup.get('licenseNo').updateValueAndValidity();
    this.userformGroup.get('age').updateValueAndValidity();
    this.userformGroup.get('birthDate').updateValueAndValidity();
    this.userformGroup.get('city').updateValueAndValidity();
    this.userformGroup.get('country').updateValueAndValidity();
    this.userformGroup.get('zipCode').updateValueAndValidity();
    this.userformGroup.get('countryCode').updateValueAndValidity();
    }
    onChange(event: any) {
    this.type = event.target.value;
    this.updateValidators();
  }
}

Этот код работает нормально, но я ищу оптимизированный способ проверки, как я могу это сделать, чтобы мне не приходилось повторно применять проверку к одним и тем же полям?

Stackblitz

Answer 1

Вы можете написать пользовательскую функцию валидатора, которая применяет другую валидацию в зависимости от текущего типа пользователя:

requiredForTypes(...types: string[]): ValidatorFn {
  return (control: AbstractControl) => {
    if (types.indexOf(this.type) > -1) {
      return Validators.required(control);
    }
    return null;
  }
}

Затем обновите элементы управления формой, чтобы использовать настраиваемый валидатор:

this.userformGroup = this.formBuilder.group({
  type: [this.type, Validators.required],
  userName: new FormControl('', this.requiredForTypes('user', 'admin')),
  firstName: new FormControl('', this.requiredForTypes('user', 'admin')),
  lastName: new FormControl('', Validators.required),
  email: new FormControl('', this.requiredForTypes('user', 'admin')),
  contactNumber: new FormControl('', this.requiredForTypes('user')),
  licenseNo: new FormControl('', Validators.required),
  age: new FormControl('', Validators.pattern('/^-?(0|[1-9]\d*)?$/')),
  birthDate: new FormControl('', this.requiredForTypes('user')),
  city: new FormControl('', Validators.required),
  country: new FormControl('', this.requiredForTypes('user')),
  zipCode: new FormControl('', Validators.pattern('/^-?(0|[1-9]\d*)?$/')),
  countryCode: new FormControl('', Validators.minLength(3)),
});

Наконец, запускайте проверку при каждом изменении типа пользователя:

this.userformGroup.controls.type.valueChanges.subscribe(type => {
  this.type = type;

  Object.keys(this.userformGroup.controls).forEach(key => {
    if (key !== 'type') {
      this.userformGroup.controls[key].updateValueAndValidity();
    }
  })
});

Пример StackBlitz.

Answer 2

Вместо создания пользовательских функций проверки или написания слишком большого количества кода в компоненте, вы можете использовать проверку на основе выбора пользователя с помощью условного выражения. Здесь я использовал проверку от @rxweb validators (RxwebValidators).

Оптимальный код:

export class UserInfoAddComponent implements OnInit {

    userInfoFormGroup: FormGroup
        Types = [ "user","admin", "guest"];
    constructor(
        private formBuilder: RxFormBuilder
    ) { }

   ngOnInit(){
    this.userInfoFormGroup = this.formBuilder.group({
      type:[''],
      userName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      firstName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      lastName :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      email :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],     
        contactNumber :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],   
      licenseNo :['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],  
     age:['', RxwebValidators.pattern({expression:{'onlyDigit': /^[0-9]*$/}  ,conditionalExpression:(x) => x.type == 'user' })], 
     birthDate:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      city:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      country:['',RxwebValidators.required({conditionalExpression:(x) => x.type == 'user' })],
      zipCode:['',RxwebValidators.pattern({expression:{'zipCode': /^-?(0|[1-9]\d*)?$/}  ,conditionalExpression:(x) => x.type == 'user' })], 
       countryCode:['',RxwebValidators.minLength({value:3,conditionalExpression:(x) => x.type == 'user' })], 


    });


    }
}

Stackblitz рабочий пример

Answer 3

Вы можете реорганизовать свои условия проверки.

1. Применить проверку непосредственно к объявлению, которое является общим для всех 3 типов.

   this.userformGroup = this.formBuilder.group({
       type: ['user'],
       userName: [''],
       firstName: [''],
       lastName: ['', [Validators.required]],
       email: [''],
       contactNumber: [''],
       licenseNo: ['', [Validators.required]],
       age: [''],
       birthDate: [''],
       city: ['', [Validators.required]],
       country: [''],
       zipCode: ['', [Validators.pattern('/^-?(0|[1-9]\d*)?$/')]],
       countryCode: ['', [Validators.required, Validators.minLength(3)]]
   });
   

2. Реорганизовать блок if else в функции updateValidators

   if (this.type === 'user' || this.type === 'admin') {
       this.userformGroup.get('userName').setValidators([Validators.required]);
       this.userformGroup.get('firstName').setValidators([Validators.required]);
       this.userformGroup.get('email').setValidators([Validators.required]);
       this.userformGroup.get('age').setValidators([Validators.pattern('/^-?(0|[1-9]\d*)?$/')]);
   } else {
       this.userformGroup.get('userName').setValidators([]);
       this.userformGroup.get('firstName').setValidators([]);
       this.userformGroup.get('email').setValidators([]);
       this.userformGroup.get('age').setValidators([]);
   }
   
   if (this.type === 'user') {
       this.userformGroup.get('contactNumber').setValidators([Validators.required]);
       this.userformGroup.get('birthDate').setValidators([Validators.required]);
       this.userformGroup.get('country').setValidators([Validators.required]);
   }
   else {
       this.userformGroup.get('contactNumber').setValidators([]);
       this.userformGroup.get('birthDate').setValidators([]);
       this.userformGroup.get('country').setValidators([]);
   }
   

3. Вам не нужно вызывать updateValueAndValidity для элементов управления, проверка которых никогда не изменяется.

Я заметил некоторые другие проблемы с вашим кодом.

1. onChange функция никогда не вызывается из html.

2. updateValidators функция не получаетвызывается при инициализации формы.это необходимо в этом случае, так как вы присваиваете «пользовательское» значение для управления типом.Добавьте эти 2 строки после инициализации формы.

   this.type = 'user';
   this.updateValidators();
   

3. В html-строке 12 есть опечатка, которая должна быть

   formControlName="userName"