Реактивная форма Angular 6, асинхронный валидатор FormArray не может выделить FormControl - PullRequest
Новая
       32

Реактивная форма Angular 6, асинхронный валидатор FormArray не может выделить FormControl

0 голосов
/ 09 октября 2018

У меня есть FormArray в FormGroup, и каждый из FormArray имеет несколько FormGroup и может добавлять их динамически.

У меня есть Async Validator, где ему нужны все данные в FormGroup для проверки минимального payRate,в настоящее время есть фиктивный Async Validator, который не использует все значения FormGroup, но будет нуждаться в них для вызова API.

Проблема возникает потому, что если мне нужны все данные FormGroup, мне нужно добавитьAsync Validator для FormGroup, а не для отдельного FormControl, к которому мне нужно получить ng-invalid , чтобы иметь цвет границы: красный.

Ссылка StqackBlitz: https://stackblitz.com/edit/angular-vr4cya-b3r3od

addPay.push(
    new FormGroup({
      "payRate": new FormControl(assign.jobRate, Validators.required),
      "position": new FormControl(assign.position, Validators.required),
      "location": new FormControl(assign.location, Validators.required),
      "department": new FormControl(assign.department, Validators.required)
    },null,this.payRateValidator.bind(this))
  );

payRateValidator: 

payRateValidator(control: AbstractControl): {[key: string]: any} {
const payRate = control.get('payRate').value;
  const location = control.get('location').value;
  const department = control.get('department').value;

const promise = new Promise<any>((resolve, reject) => {
  setTimeout(() => {
    if (payRate <= 13) {
      resolve({'payRateisLess': true});
    } else {
      resolve(null);
    }
  }, 1500);
});
return promise;

}

Невозможно использовать асинхронный валидатор для PayRate FormControl, поскольку функция асинхронного валидатора не может получить доступ к значениям другихFormControl в FormGroup. 

addPay.push(
    new FormGroup({
      "payRate": new FormControl(assign.jobRate, Validators.required, this.payRateValidator.bind(this)),
      "position": new FormControl(assign.position, Validators.required),
      "location": new FormControl(assign.location, Validators.required),
      "department": new FormControl(assign.department, Validators.required)
    })
  );

В настоящее время, когда я нажимаю кнопку + Дополнительное назначение, по умолчанию я получаю текст ошибки, "Pарендная плата введите Pay Rate> 13 ", но это не скрывается, когда я набираю значение больше 13, потому что Мне нужно ввести все входные данные в FormGroup , так как у меня есть другие валидаторы для этогоОбязательно.

После ввода всех входов в текущую FormGroup сообщение об ошибке исчезает.

Есть ли какой-либо способ показать только сообщение об ошибке, только для тега ввода ставки оплаты при наличии асинхронного валидатора для всей FormGroup ???.

enter image description here

1 Ответ

0 голосов
/ 09 октября 2018

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

Для подавления границ вокругнедопустимые компоненты, которые вы можете использовать, 

.cancel-border {
  border: none !important;
}

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

div.ng-invalid {
  border: 1px solid red;
}

Сказав, что я также переместил вашу функцию AsyncValidator в элемент управления payRate, используя фабричный метод: 

makeValidator(fg: FormGroup) {
return (control: AbstractControl) => {
  const payRate = fg.get('payRate').value;
  const location = fg.get('location').value;
  const department = fg.get('department').value;

  const promise = new Promise<any>((resolve, reject) => {
    setTimeout(() => {
      if (payRate <= 13) {
        resolve({ 'payRateisLess': true });
      } else {
        resolve(null);
      }
    }, 1500);
  });
  return promise;
}
}

и изменил способ оценки достоверности. 

<span [hidden]="assign.get('payRate').valid" ...>

В строках 54 и 70 есть небольшое дублирование кода, которое необходимо просмотреть, и сообщение о проверке появляется при каждом изменении значения.до исчезновения.Я думаю, что это можно исправить, используя наблюдаемое вместо обещания.

...