Angular 6被动表单，FormArray异步验证程序无法突出显示FormControl

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

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

问题的出现是因为如果我想要FormGroup的所有数据，我需要将异步验证器添加到FormGroup，而不是单个FormControl，我需要获得ng invalid以获得边框颜色：红色

StqackBlitz链接：

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;

当前，当我单击+附加分配按钮时，默认情况下，我会收到错误文本，“请输入支付率>13”，但当我键入大于13的值时，这不会被隐藏，因为我需要输入FormGroup中的所有输入，因为我需要其他验证程序

在当前表单组中输入所有输入后，错误消息消失

当整个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)
    })
  );

---

您想要解决的问题不是由

异步验证程序引起的。AsyncValidator将导致整个表单被标记为无效，无论它放置在何处，因为payrate无效意味着表单组及其所在的表单也无效

要抑制可以使用的无效组件周围的边框

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

makeValidator（fg:FormGroup）{
返回（控件：AbstractControl）=>{
const payRate=fg.get（'payRate'）。值；
const location=fg.get（'location'）.value；
const department=fg.get（'department'）.value；
持续承诺=新承诺（（解决、拒绝）=>{
设置超时（（）=>{
如果（payRate stackblitz示例不是一个反应式表单。如果您提供
payRateValidator
code，我可以提供一个答案。这里的一般方法应该是使用工厂方法，在闭包中捕获
FormGroup
，并为您随后传入的payRate创建一个验证函数。@AvinKavish，我已经升级了。）更新了Stackblitz链接并添加了payRateValidator。你能告诉我吗？谢谢谢伊·阿文，我如何调用异步验证器？因为当我试图像你说的那样调用时，我遇到了错误。请告诉我。这是更新的Stackblitz。你能用工作的异步验证器更新代码吗。@Varun我编辑了你发布的原始代码d有了所有的更改，那又发生了什么？除了添加那个方法，还有很多重构要做。因为它不是公共的，我看不到你所做的更改，你需要将它分叉，然后再进行更改。否则它们会丢失。我想。你能不能再做一次。我被困在这里了。@Varun应该是你，你必须把验证器放回去在表单组中，如果希望它对整个表单组的更改做出反应，而不是像最初那样仅对工资率做出反应。
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" ...>