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行有一些代碼重復，應該看到，並且每次在消失之前更改值都會顯示驗證消息。 我認為可以通過使用可觀察的方法而不是承諾來解決。