How can validate <ion-datetime> field


#1

Hi all

I’m new in Angular and Ionic.
At the moment I try to validate a simple form (in the way of reactive forms).

I tried to check the datefield (for the input field it works this way) to be required as following:

                <ion-item>
                    <ion-label>Name</ion-label>
                    <ion-input type="text" formControlName="name"></ion-input>
                </ion-item>
                <ion-card color="danger" *ngIf="name.invalid && (name.dirty || name.touched) && name.errors['required']">
                    <ion-card-content>
                        Please enter the name
                    </ion-card-content>
                </ion-card>
                <ion-item>
                    <ion-label>Valid from</ion-label>
                    <ion-datetime displayFormat="MMM DD, YYYY HH:mm" formControlName="validFrom"></ion-datetime>
                </ion-item>
                <ion-card color="danger" *ngIf="validFrom.invalid && (validFrom.dirty || validFrom.touched) && validFrom.errors['required']">
                    <ion-card-content>
                        Please define the valid from date
                    </ion-card-content>
                </ion-card>

The error is then:
ERROR TypeError: Cannot read property ‘invalid’ of null

Questions:

  1. Are the flags ‘invalid’, ‘dirty’ , ‘touched’ not provided for the datetime-field as it works with the input-field?
  2. Does anybody have an example how to validate a form in ionic 2?

Thank you in advance for any help.

Regards from Zurich
Oliver


#2

it was my mistake.

there was a typing mistake in the class behind:

  get validFrom() { return this.offerForm.get('validForm'); }

it was validForm instead of validFrom :-/

time for a break