基于交叉字段的角度日期验证

Question

我有一个角度反应形式，我想在其中验证入学日期，使其最小日期是出生日期，我如何根据交叉字段验证它

组件 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>

我有什么方法可以使用交叉字段验证date 而无需在angular 中进行自定义验证

Stackblitz :https://stackblitz.com/edit/cross-field-date-validation-in-angular

Answer 1

如下例所示，我们可以创建一个自定义验证器来比较两个字段dueDate和repeatUntilDate。然后我们可以将此验证器应用于组件类中存在的 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;
};

Answer 2

如果对控件进行验证，则可以使用 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 3

您可以使用@rxweb 的 minDate 验证来代替自定义验证功能 这是代码：

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

这里是forked Stackblitz

Answer 4

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

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。希望对您有所帮助。