Angular 基于交叉字段的日期验证

Question

我有一个 angular 反应式表格，我想在其中验证入学日期，使其最短日期为出生日期，我如何根据交叉字段

对其进行验证

组件 ts：

    ngOnInit(){
    this.userForm = this.formBuilder.group({
      'birthDate':[''],
      'admissionDate': ['']
      });
    }
    }

    @Component({
      selector: 'app-plan-admission-date',
      template: 
  <div  class="form-group">
    <label>Admission Date</label>

    <input type="text" [formControl]="admissionDateControl" class="form-control"  />
  </div>

    })
    export class AdmissionDateComponent  {
      @Input() admissionDateControl:AbstractControl;
    }

Html:

<div>
  <div class="container">
  <main class="col-12"><h3 class="bd-title" id="content">Cross Field Validation Date</h3>
<br>
<form  [formGroup]="userForm">
<div  class="form-group">
    <label>Birth Date</label>
    <input type="text" formControlName="birthDate" class="form-control"  />

</div>
<app-plan-admission-date [admissionDateControl]="userForm.controls.admissionDate"></app-plan-admission-date>

<button [disabled]="!userForm.valid" class="btn btn-primary">Submit</button>
</form></main>
</div>
</div>

有什么方法可以在 angular

中使用交叉字段验证 date 而无需进行自定义验证

堆栈闪电战：https://stackblitz.com/edit/cross-field-date-validation-in-angular

Answer 1

你是对的，你可以通过自定义验证器来做到这一点，它应该看起来像这样（除了日期验证）：

export function DateMoreThan(controlName: string, thanControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const thanControl = formGroup.controls[thanControlName];

    if (control.errors && !control.errors.mustBeMoreThan) {
      return;
    }

    if (new Date(control.value) < new Date(thanControl.value)) {
      control.setErrors({ mustBeMoreThan: true });
    } else {
      control.setErrors(null);
    }
  }
}

我们将名称为 controlName 的控件的日期与名称为 thanControlName 的控件进行比较。这里正在工作 example on stackblitz。希望对您有所帮助。

Answer 2

您可以使用 @rxweb 的 minDate 验证，而不是制作自定义验证函数这是代码：

ngOnInit(){
this.userForm = this.formBuilder.group({
  'birthDate':[''],
  'admissionDate': ['',RxwebValidators.minDate({fieldName:"birthDate"})]
  });
 }
}

这是forked Stackblitz

Answer 3

如果对控件进行验证，可以使用parent来获取formGroup

this.userForm = this.formBuilder.group({
  'birthDate':['11/12/2016'],
  'admissionDate': ['11/12/2016',DateMoreThan('birthDate')]
  });
}

export function DateMoreThan(thanControlName: string) {
  return (control: AbstractControl) => {
    if (!control.parent)
      return null
    const formGroup=control.parent as FormGroup;
    const thanControl = formGroup.controls[thanControlName];

    if (thanControl)
    {
       const [day, month, year] = control.value.split("/")
       const [day2, month2, year2] = thanControl.value.split("/")
       return new Date(year2,month2-1,day2).getTime()>new Date(year,month-1,day).getTime()?
           { mustBeMoreThan: true }:null
    }
  }
}

Answer 4

如下例所示，我们可以创建一个自定义验证器来比较两个字段 dueDate 和 repeatUntilDate。然后我们可以将此验证器应用于组件 class 中存在的 formGroup 实例。有关如何对反应式表单使用自定义验证器的更详细说明，请查看 this video.

export const dateValidator: ValidatorFn = (control: FormGroup) : ValidationErrors | null => {
  const dueDate = control.get('dueDate');
  const recurrenceType = control.get('recurrenceType');
  const repeatUntil = control.get('repeatUntil');

  return dueDate && recurrenceType && repeatUntil && recurrenceType.value != 'NONE'
  && dueDate.value >= repeatUntil.value ? {dueDateGtEqRepeatUntil: true} : null;
};

Angular 基于交叉字段的日期验证

Angular date validation based on cross field

angular

angular-reactive-forms