Hi everyone!
I’m having trouble with my ion-datetime tag as it’s throwing an error when I put validations. I have this form with fields that when encountered an invalid input, will have a red border around it. So far so good when I use it on ion-input but when it comes to ion-datetime I get the error stated in the title.
Here are my codes:
HTML
<form [formGroup]="authForm" (ngSubmit)="submitForm(authForm.value)">
<!-- this works -->
<ion-item class="input-style" formControlName="amount">
<ion-label stacked>Amount</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
<div class="error-msg" *ngIf="authForm.get('amount').hasError('required') && authForm.get('amount').touched">Amount is required!</div>
<div class="error-msg" *ngIf="authForm.get('amount').hasError('min') && authForm.get('amount').touched">Amount must be greater than 0!</div>
<!-- These two do not work -->
<ion-item class="input-style" formControlName="start_date">
<ion-label stacked>Start Date</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY"></ion-datetime>
</ion-item>
<div class="error-msg" *ngIf="authForm.get('start_date').hasError('required') && authForm.get('start_date').touched">Amount is required!</div>
<ion-item class="input-style" formControlName="end_date">
<ion-label stacked>End Date</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY"></ion-datetime>
</ion-item>
<button type="submit" ion-button full [disabled]="!authForm.valid">Submit</button>
</form>
So I put the formControlName in the ion-item because that will only make the whole item with border red, not just the fields.
TS:
authForm: FormGroup;
constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder) {
this.authForm = formBuilder.group({
amount: ['', Validators.compose([Validators.required, Validators.min(1)])],
start_date: ['', Validators.required],
end_date: ['', Validators.required],
});
}
And my SCSS:
ion-item.ng-invalid.ng-touched {
border: 1px solid red;
}
ion-item.ng-valid {
border: 1px solid green;
}
ion-list.ng-valid {
border: 1px solid green;
}
.error-msg {
color: red;
}
Screenshot of the form:
What I want is to have the whole ion-item border colored red if there is an error. Putting the formControlName on the ion-item tag for the ion-datetime will throw the said error.
Screenshot of the error:
Is there any fix for this?
Thanks you!!!