Использование FormArray в валидации Angular 6 - PullRequest
Новая
       22

Использование FormArray в валидации Angular 6

0 голосов
/ 13 мая 2019

У меня около 50 элементов управления на моей странице (с использованием вкладок), одна вещь, которая меня больше всего беспокоит, - это часть проверки, в которой я вижу то же самое Validators, повторяющееся снова со всеми элементами управления.

Я могу сгруппировать валидаторы в 2, 

1. [Validators.required, Validators.maxLength(50)]
2. Validators.required

но я использую обычный метод проверки и поэтому мой код растет так долго. В любом случае я могу использовать 2 FormArray, чтобы включить элементы управления и применить проверки? 

  this.candidateForm = new FormGroup({
      firstName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      lastName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      fatherName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      motherName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      placeOfBirth: new FormControl('', Validators.required),
      nationalityList: new FormControl('', Validators.required),
      dateOfBirth: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      genderList: new FormControl('', Validators.required),
    });

Можно ли сделать этот код более удобным для чтения?

Что-то вроде, 

FormArray[] values = formControl{ control1, control2, control3};
FormArray[] values2 = formControl{ control4, control5, control6};

validation1 = [Validators.required, Validators.maxLength(50)]
validation2 = [Validators.required]

values = Validation1
values2 = Validation2

Этим я могу просто добавить элементы управления, если это увеличивается.

1 Ответ

0 голосов
/ 14 мая 2019

Я бы создал функцию: например, 

function createFormControl(maxLen: number = 0) {
  const validators = [Validators.required];
  if (maxLen > 0) validators.push(Validators.maxLength(maxLen));
  return new FormControl('', validators)
}

и использовал бы ее так: 

const MAX_LEN = 50;
this.candidateForm = new FormGroup({
      firstName: createFormControl(MAX_LEN),
      lastName: createFormControl(MAX_LEN),
      ...
      placeOfBirth: createFormControl(),
...