在比较角形式的验证字段时如何修复误差

Question

我正在创建一个自定义验证，以比较日期并打印错误时，当结束日期小于开始日期时。我想我做的一切正确，但我遇到了错误。运行应用程序时，它会跨越错误。错误与我使用自定义验证功能的事实有关。但这就是每个人都这样做的方式

我的错误

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'pristine' of null
        at FormGroup.campaign_period [as validator] (app.component.ts:10)
        at FormGroup.AbstractControl._runValidator (forms.js:3378)
        at FormGroup.AbstractControl.updateValueAndValidity (forms.js:3332)
        at new FormGroup (forms.js:4268)
        at FormBuilder.group (forms.js:7812)
ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

 Example:

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
   firstName: new FormControl()
});

---

ngOnInit() {
    this.signupForm = this._fb.group({
          firstname   : ['', Validators.required],
          lastname    : ['', Validators.required],
          date        : ['', Validators.required],
          gender      : ['', Validators.required],
          address     : ['', Validators.required],
          email       : ['', Validators.required, Validators.pattern(this.EMAIL_REGEXP)],
           city       : ['', Validators.required],
           state      : ['', Validators.required],
           country    : ['', Validators.required],
           hobbies    : this._fb.array([this.createHobbies()]),
           campaigndateForm: this._fb.group({
             startDate: ['', Validators.required],
             endDate: ['', Validators.required]
           }, { validator: campaign_period })
    });
  }

---

function campaign_period(c: AbstractControl): {[key: string]: boolean} | null {
  let start_date = c.get('stateDate');
  let end_date = c.get('endDate');
  if (start_date.pristine || end_date.pristine) {
     return null;
  }
    if (end_date.value > start_date.value) {
      return null;
  }
  return { 'range': true };
}
<div class="date_field_width" >
  <mat-form-field>
    <input formControlName="startDate" matInput [matDatepicker]="startdate" placeholder="Start date">
    <mat-datepicker-toggle matSuffix [for]="startdate"></mat-datepicker-toggle>
    <mat-datepicker #startdate></mat-datepicker>
  </mat-form-field>
  <mat-form-field>
    <input formControlName="endDate" matInput [matDatepicker]="enddate" placeholder="End a date">
    <mat-datepicker-toggle matSuffix [for]="enddate"></mat-datepicker-toggle>
    <mat-datepicker #enddate></mat-datepicker>
  </mat-form-field>
</div>

Answer 1

  let start_date = c.get('stateDate');
  let end_date = c.get('endDate');
  if (start_date.pristine || end_date.pristine) {
     return null;
  }

错误是当您访问start_date或end_date的pristine时，如果start_date或end_date为null，则无法达到原始。

您需要检查start_date和end_date，然后检查pristine