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分配给错误全局变量;如果我尝试执行验证验证将触发警告中显示的错误消息，关闭后警告我收到错误，如

EXCEPTION：./AddLeadsPage类AddLeadsPage中的错误 - 内联模板：427：65引起：无法设置未定义属性'错误'

任何人帮我解决这个错误

Answer 1

您已将自定义验证程序echo '<div class ="album_title">'.$title.'('.$credit.')'.'</div>';设置为组件而非指令。组件不能像提供者那样注入。检查是否有自定义验证程序。

NextPayDayValidator1

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

创建提供程序

NextPayDayValidator1

并注入组件构造函数。

运行时错误无法读取角度2中未定义的属性“元素”？

1 个答案: