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

Question

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

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

问题之所以出现，是因为如果我想要FormGroup的所有数据，我需要将异步验证器添加到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不能具有异步验证器，因为异步验证器功能无法访问FormGroup中其他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” ，但是当我键入value时，该字符不会被隐藏大于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行有一些代码重复，应该注意，每次在消失之前更改值都会显示验证消息。我认为可以通过使用可观察的方法而不是应许的方法来解决此问题。