Angular 6反应性表单，FormArray异步验证器无法突出显示FormControl

Question

我在FormGroup中有一个FormArray，每个FormArray都有多个FormGroup，可以动态添加它们。

我有一个异步验证器，它需要FormGroup中的所有数据来验证最小的payRate，目前有一个虚拟的异步验证器，它不使用所有FormGroup值，但需要它们来进行API调用。

出现问题是因为，如果我需要FormGroup的所有数据，则需要将异步验证器添加到FormGroup中，而不是将单个FormControl添加到单个FormControl中，我需要使ng- valid带有边框颜色：红色。

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;

}

由于异步验证器功能无法访问FormGroup中其他FormControl的值，因此不能具有PayRate FormControl的异步验证器。

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)
    })
  );

当前，当我单击+“其他分配”按钮时，默认情况下，我会收到错误消息“请输入薪水率> 13” ，但是当我键入大于13的值时，这并不会被隐藏，因为我需要输入所有FormGroup中的输入，因为我还有其他要求的验证器。

在当前FormGroup中输入所有输入后，错误消息消失。

有什么方法只显示错误消息，仅在整个FormGroup具有异步验证器时才显示Pay Rate Input标签。

Answer 1

您要解决的问题不是由AsyncValidator引起的。 不论放置在哪里，AsyncValidator都将导致整个表单被标记为无效，因为Payrate无效表示formGroup及其所在的Form也无效。

为了消除可以使用的无效组件周围的边界，

.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行有一些代码重复，应该看到，并且每次在消失之前更改值都会显示验证消息。 我认为可以通过使用可观察的方法而不是承诺来解决。