Error: No value accessor for form control with name:


#1

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:

image

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!!!