런타임 오류 각도 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 

    }); 


} 
} 

오류가 글로벌 VAR를 에러에서 errormsg를 할당 발생 전 오류 글로벌 variable.if을 만들 수 있습니다 위의 코드 iable, 내가 유효성 검증을 실행하려고하면 마감 후 경고에 표시된 화재 오류 messge 날 같은 오류가 경고합니다

예외 : ./AddLeadsPage 클래스 AddLeadsPage 오류 - 인라인 템플릿 : 427 : 65에 의해 발생 : 정의되지 않은

의 특성 '오류'를 설정할 수 없습니다 어느 날 당신은 대신 지침의 구성 요소로 사용자 정의 유효성 검사기 NextPayDayValidator1을 설정 한

Answer 1

이 버그를 해결하는 데 도움이됩니다. 구성 요소는 공급자처럼 주입 할 수 없습니다. 맞춤 검사기에 대해서는 here을 확인하십시오.

@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; 
     //.... 
} 
} 

에 대한 공급자를 작성하고 구성 요소 생성자에 주입.