运行时错误 无法读取角度 2 中未定义的属性'element'？

Question

我创建了形式构建器验证器，该验证器可以完美地进行验证，但我需要从验证器中获取错误消息，因此我尝试了一些我在下面显示的方法

 import { Injectable,Output,Component} from '@angular/core';
 import { FormGroup, FormControl} from '@angular/forms';
 import{Sharedata} from '../providers/sharedata';
 export class NextPayDayValidator1 {
    public error: any="Next Pay Date should be greater than todays date";
        constructor(public Share:Sharedata){
        }
 public isValid(control: FormControl): any {
    //  console.log("false");    
      let formGroup = control.parent;      
      var IsValid=true;  
      var errormessage;      
     //  this.Err="eerere";
    if(formGroup) {
           console.log("true");
            var SelVal_Howpaid=formGroup.get('Frequency').value;
            console.log(SelVal_Howpaid);
            var today = new Date();
            var today_date = today.getDate();
            var today_month = today.getMonth();
            var today_year = today.getFullYear();
            var weekNo = 0;
            for (var index = week[0]; index <= week[1]; index++) {
                weekNo++;
            }
            var nextpaydaycontrol=formGroup.get('NextPayDate');
            var date_next = new Date( formGroup.get('NextPayDate').value);
            var date_nextpaydate = date_next.getDate();
            var month_nextpaydate = date_next.getMonth();
            var year_nextpaydate = date_next.getFullYear();
            console.log("nextpaydaycontrol"+date_next +"date"+date_nextpaydate+"month"+month_nextpaydate+"year"+year_nextpaydate);
                 if (nextpaydaycontrol.value == "") {
                        IsValid = false;
                        errormessage = "* Please select Next Pay Date";
                        console.log(errormessage);
                      this.error=errormessage;
                      alert(this.error);
                                        return{
                                                  " * Please select Next Pay Date":true           
                                           }
                    }
            }
    }

我的addleads.html

<ion-item>
                        <ion-label>Next Pay Date:</ion-label>
                        <!--<ion-input formControlName="NextPayDate" type="number"></ion-input>-->
                        <ion-datetime displayFormat="MM/DD/YYYY" formControlName="NextPayDate" (ionChange)="npay()"></ion-datetime>
                    </ion-item>
                    <span style="color:red" *ngIf="!RegisterForm3.controls.NextPayDate.valid  && (!RegisterForm3.controls.NextPayDate.dirty || submitAttempt)">ddd </span>
                    <span style="color:red" *ngIf="!RegisterForm3.controls.NextPayDate.valid  &&  RegisterForm3.controls.NextPayDate.hasError('Paymustgreaterthentodaydate') && (!RegisterForm3.controls.NextPayDate.dirty || submitAttempt)"> * Next Payday Must Be Greater Than Today's Date </span>
                    <span style="color:red" *ngIf="!RegisterForm3.controls.NextPayDate.valid && RegisterForm3.controls.NextPayDate.hasError('Invalid') && (!RegisterForm3.controls.NextPayDate.dirty || submitAttempt)"> * Invalid Next Payday</span>
                    <hr/>

和我的addlead ts

import { Component} from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
import {ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import{Sharedata} from '../../providers/sharedata';
import {NextPayDayValidator1} from '../../validators/NextPayDate'
import 'rxjs/add/operator/map';
/*
  Generated class for the AddLeads page.
  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'add-leads.html'
})
export class AddLeadsPage {
  RegisterForm3: FormGroup;
 public NextPayDateErrorMsg:any;
  loading: any;
  constructor(public navCtrl: NavController,platform: Platform,public np:NextPayDayValidator1 ,private datePipe: DatePipe, public formBuilder: FormBuilder, public toastCtrl: ToastController,public loginservice :Loginservice,public sharedata:Sharedata,  public loadingCtrl: LoadingController,
   public http: Http, public alertCtrl: AlertController) {
   this.NextPayDateErrorMsg=this.np.error;
   alert(this.NextPayDateErrorMsg)
    this.RegisterForm3 = formBuilder.group({
        LastPayDate: ['', Validators.required],
        NextPayDate:['',np.isValid]//here i invoke my validator
    });

}
}

上面的代码我创建错误全局变量。如果发生任何错误，将errormsg分配给错误全局变量；如果我试图执行验证验证验证会触发错误，请在关闭时在警报中显示出ersge Messge，请在警报我遇到错误之后，例如

异常：./addleadspage类AddLeadSpage -inline中的错误 模板：427：65造成的：无法设置未定义

的属性'错误'

任何人都可以帮助我修复此错误

Answer 1

您已将自定义验证器NextPayDayValidator1设置为组件而不是指令。组件不能像提供者一样注入。在此处查看自定义验证器。

@Directive({
  selector: '[next-pay-valid]',
  providers: [{provide: NG_VALIDATORS, useExisting: NextPayDayValidator1, multi: true}]
})
export class NextPayDayValidator1 implements Validator, OnChanges {..}

或为NextPayDayValidator1

创建提供商

@Injectable()
export class NextPayDayValidator1 {
 public error: any="Next Pay Date should be greater than todays date";
        constructor(public Share:Sharedata){
        }
 public isValid(control: FormControl): any {
    //  console.log("false");    
      let formGroup = control.parent;      
      var IsValid=true;  
      //....
}
}

和在组件构造器中注入。