Отправить пользовательский валидатор формы управления FormArray

Question

Я очень просто пытаюсь проверить элемент управления, если его значение совпадает со значением в FormArray.

Я хочу пояснить, что Я не хочу проверять форму или FormGroup илиFormArray .Этот вопрос предназначен для изучения того, как передавать параметры в функцию проверки и проверки элемента управления addValue.

Вот что я имею в моей пользовательской службе проверки:

public form: FormGroup = this.fb.group({
    addValue: this.fb.control(null, [this.validatorService.duplicate(this.form.get('values'))]),
    values: this.fb.array([])
});

Ифункция валидатора

public duplicate(values: FormArray): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        for (let i = 0, j = values.length; i < j; i++ ) {
            if (control.value === values[i].value) {
                return { 'duplicate': true };
            }
        }
        return null;
    };
}

В этот момент я получаю сообщение об ошибке, когда добавляю валидатор с FormArray в качестве аргумента:

Аргумент типа 'AbstractControl' не может быть назначенпараметр типа 'FormArray'.Типу «AbstractControl» не хватает следующих свойств из типа «FormArray»: controls, at, push, insert и еще 5.ts (2345) (свойство) FormGroup.controls: {[key: string]: AbstractControl;}

Может кто-нибудь показать мне, как отправить FormArray в функцию валидатора?

Вот Stackblitz валидатора, НЕ получающего FormArray

Answer 1

Вы пытаетесь получить доступ к FormArray, который еще не создан:

    this.form = this.fb.group({
  addValue: this.fb.control(null, [this.validatorService.duplicate(this.form ? this.form.get('values').value : []), Validators.minLength(2)]),
  values: this.fb.array([])
});

, чтобы решить эту проблему, вам нужно:

1) сначала создать экземпляр FormArray
2) Добавьте валидатор после создания FormGroup

Answer 2

AbstractControl - базовый класс, просто приведите его:

public form: FormGroup = this.fb.group({
    addValue: this.fb.control(null, [this.validatorService.duplicate(this.form.get('values') as FormArray)]),
    values: this.fb.array([])
});

Вы также можете отправлять значения напрямую:

this.validatorService.duplicate(this.form ? this.form.get('values').value : []);

и

public duplicate(values: string[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        for (let i = 0, j = values.length; i < j; i++ ) {
            if (control.value === values[i]) {
                return { 'duplicate': true };
            }
        }
        return null;
    };
}

NEWОТВЕТ

Вместо этого добавьте форму Validator:

this.form = this.fb.group({
  addValue: this.fb.control(null),
  values: this.fb.array(['test2', 'test3'])
}, { validator: this.validatorService.duplicate2 });

, используя этот код:

public duplicate2(control: AbstractControl): ValidationErrors | null {
    const newValue = control.get('addValue') ? control.get('addValue').value : null;
    const values = control.get('values') ? control.get('values').value : [];

    console.log("1 " + newValue);
    console.log(values);
    for (let i = 0, j = values.length; i < j; i++ ) {
              if (newValue === values[i]) {
                  return { 'duplicate2': true };
              }
          }
          return null;          
  }

, а также измените свою проверку:

<app-validator [control]="form"></app-validator>

см. https://stackblitz.com/edit/send-validator-formarray-l8j7ys

Вы можете передать имена полей в качестве параметра в валидатор.