typescript 带条件的自定义验证器只检测一次更改

lnvxswe2  于 2023-06-24  发布在  TypeScript
关注(0)|答案(3)|浏览(107)

我有一个FormGroup看起来像这样:

this.complaint = new FormGroup({
      date: new FormControl(null, Validators.required),
      isRangeDate: new FormControl(false, Validators.required),
      untilDate: new FormControl(null, rangeDateValidator()),
    });

我有这个自定义验证器rangeDateValidator

function rangeDateValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    console.log(control?.parent?.get('isRangeDate')?.value)
    return control?.parent?.get('isRangeDate')?.value ? {required: true} : null;
  }
}

基本上检查用户是否选择输入范围日期,如果是-它的更改untilDate控件是必需的。这个东西只在第一次工作-默认情况下isRangeDatefalse,所以没有required验证添加到控件,当它更改为true时,它将required添加到控件,但只有一次-当我将其更改回isRangeDate: false时,所需的验证仍然附加到它上,我可以在控制台看到验证器函数没有调用,甚至FormGroup也被更改了。
有什么想法吗?

niknxzdl

niknxzdl1#

它不会调用你的自定义验证器,因为你正在更改isRangeDate表单而不是untilDate表单,你只会将自定义验证器分配给untilDate表单。也许你可以在改变isRangeDate的形式后调用一个函数:myForm.markAllAsTouched()myForm.valid()。我认为这应该重新验证表单并调用自定义验证器。

v8wbuo2f

v8wbuo2f2#

我认为这是因为当你在输入框中手动添加false时,它被当作一个字符串而不是布尔值,所以也许这就是为什么验证对象没有被添加到untilDate中的原因。

6xfqseft

6xfqseft3#

我终于找到了答案:

  • rangeDateValidator验证器没有第二次触发的原因是这个验证器是附加到untilDate FormControl的,所以它只在untilDate值被改变时触发,而这并没有发生,因为唯一的改变的字段只有isRangeDate字段,所以验证器函数没有调用。

所以,答案是在FormGroup级别上添加一个自定义验证器(不特定于FormControl),请查看此服务:

@Injectable({
  providedIn: 'root'
})
export class ComplaintService {
  private readonly complaint: FormGroup;

  constructor() {
    this.complaint = new FormGroup({
      date: new FormControl(null, Validators.required),
      isRangeDate: new FormControl(false, Validators.required),
      untilDate: new FormControl(null),
      situationDetails: new FormControl(null, Validators.required),
      whyNotRight: new FormControl(null),
      whatYouDone: new FormControl(null),
      isTrial: new FormControl(null, Validators.required),
      howCanWeHelp: new FormControl(null),
      isAboutProperty: new FormControl(null, Validators.required),
      propertyDetails: addressForm(),
      attachments: filesForm()
    }, this.groupValidator());
  }

  groupValidator(): ValidatorFn {
    return (group: AbstractControl): ValidationErrors | null => {
      if (group?.get('isRangeDate')?.value) {
        group.get('untilDate')?.addValidators(Validators.required)
      } else {
        group.get('untilDate')?.removeValidators(Validators.required)
        group.get('untilDate')?.setErrors(null);
      }

      return group.errors;
    }
  }
}

这样,验证器函数groupValidatorFormGroup中的每个更改时都会被触发,并且可以从那里添加或删除验证器
希望有帮助:)

相关问题