首页 文章

Angular 6 Reactive Form，FormArray Async Validator无法突出显示FormControl

提问于
浏览 次
0

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

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

问题来了，因为如果我想要FormGroup的所有数据，我需要将Async Validator添加到FormGroup而不是单独的FormControl，我需要将 ng-invalid 添加到border-color：red .

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;

}

Can't have the Async Validator for the PayRate FormControl because of the Async Validator function cant access the values of other FormControl in the 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)
    })
  );

目前，当我单击“附加分配”按钮时，默认情况下，我收到错误文本 "Please enter Pay Rate >13" ，但是当我输入大于13的值时，这不会被隐藏，因为 I need to enter all the inputs in the FormGroup 因为我有其他验证器是必需的 .

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

Is there any way to only show the error message, just for the Pay Rate Input tag when having Async Validator for the whole FormGroup???.

enter image description here

angular angular5 angular6 angular-reactive-forms angular-forms

1 回答

  • 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行有一些代码重复应该被查看，并且每次在消失之前更改值时都会出现验证消息 . 我认为可以通过使用observable而不是promise来解决 .

    回复于

相关问题