0

我正在处理有角度的表格并且有一个可选字段，它有从时间到时间，我必须做出条件，我只输入从时间或到时间，而不是两次，然后我应该看到错误消息，但它是可选的字段，所以我必须为此制作一个自定义验证器，我对如何为可选字段制作此自定义验证功能感到困惑。因此，如果有人可以提供帮助，那就太好了。

这是我的 html 表单代码：

<div class="form-group">
                    <div class="col-lg-12 d-inline-flex">
                        <span  id="working-hours-text" class=" text-nowrap span-width" for="workingHoursFrom" [ngClass]="{'error-line-spacing': ((workHoursFrom.dirty && workHoursFrom.touched) && !workHoursTo.dirty) || (!workHoursFrom.dirty && (workHoursTo.dirty && workHoursTo.touched))}"> Working Hours:</span>
                        <div class="w-100">
                            <div id="working-hours-errorMsg" *ngIf="((workHoursFrom.dirty && workHoursFrom.touched) && !workHoursTo.dirty) || (!workHoursFrom.dirty && (workHoursTo.dirty && workHoursTo.touched))" class="help-block text-danger w-100 text-center pr-5 body-text-1">Please enter both the From and To working hours</div>
                            <div class="d-inline-flex w-100">
                                <div class=" w-100 d-inline-flex form-control text-center m-auto" [ngClass]="{'red-border': ((workHoursFrom.dirty && workHoursFrom.touched) && !workHoursTo.dirty) || (!workHoursFrom.dirty && (workHoursTo.dirty && workHoursTo.touched))}">
                                    <input id="input-working-from" formControlName="workingHoursFrom" type="time" class=" text-center m-auto pr-2 col-6" style="border: none;">
                                    <span>-</span>
                                    <input id="input-working-to" formControlName="workingHoursTo" type="time" class=" text-center m-auto pl-2 col-6" style="border: none;">
                                  </div>
                                  <em id="working-hours-errorMsg-icon" *ngIf="((workHoursFrom.dirty && workHoursFrom.touched) && !workHoursTo.dirty) || (!workHoursFrom.dirty && (workHoursTo.dirty && workHoursTo.touched))"
                                  style="padding-left: 15px;" class="fas fa-exclamation-circle red-symbol"></em>
                            </div>
                        </div>
                    </div>
                </div>

这是我的 ts 文件：

this.form = new FormGroup({
workingHoursFrom: new FormControl('', [Validators.pattern('^(2[0-4]|[0-1][0-9]):[0-5][0-9]$')]),
      workingHoursTo: new FormControl('', [Validators.pattern('^(2[0-4]|[0-1][0-9]):[0-5][0-9]$')])
});
get workHoursFrom(){ return this.form.get('workingHoursFrom');}
  get workHoursTo(){return this.form.get('workingHoursTo');}
4

1 回答 1

0

我还没有测试它，但我想你可以实现你想要的东西，如果你做这样的事情：


this.form = new FormGroup({
workingHoursFrom: new FormControl('', 
[this.myOptionalValidatorFrom(
   [Validators.pattern('^(2[0-4]|[0-1][0-9]):[0-5][0-9]$')]
)]),
workingHoursTo: new FormControl('', 
[this.myOptionalValidatorTo(
   [Validators.pattern('^(2[0-4]|[0-1][0-9]):[0-5][0-9]$')]
)]),
});

.........

myOptionalValidatorFrom(validators?: (ValidatorFn | null | undefined)[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        let response = null;
        
        if (this.form?.value?.workingHoursTo != null &&  this.form?.value?.workingHoursTo !='') {
           response = control.value ? Validators.compose(validators)(control) : null;
        }       

        return response;
    };
}

myOptionalValidatorTo(validators?: (ValidatorFn | null | undefined)[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        let response = null;
        
        if (this.form?.value?.workingHoursFrom != null && this.form?.value?.workingHoursFrom !='') {
           response = control.value ? Validators.compose(validators)(control) : null;
        }       

        return response;
    };
}

请，一旦你测试它是否有效，请在评论中告诉我们，好吗？

于 2022-02-01T16:59:07.810 回答