Date Time Picker in Angular material

0
votes

I am trying to implement date time picker in angular material form but Iam unable to do that. Please find my code below.

<mat-form-field>
  <input formControlName="nextScheduledDate" mdc-datetime-picker="" date="true" time="true" type="text" id="datetimeedit"
         placeholder="Scheduled Date and Time" show-todays-date="" minutes="true" min-date="minDate" max-date="maxDate"
         edit-input="true" show-icon="true" ng-model="dateTimeEdit" name="datetimeedit"
         class=" dtp-no-msclear dtp-input mat-input">
</mat-form-field>

I am getting following error while implementing:

PopupDialogComponent.html:24 ERROR Error: mat-form-field must contain a MatFormFieldControl. at getMatFormFieldMissingControlError (form-field.js:109) at MatFormField._validateControlChild (form-field.js:691) at MatFormField.ngAfterContentChecked (form-field.js:495) at callProviderLifecycles (core.js:32324) at callElementProvidersLifecycles (core.js:32293) at callLifecycleHooksChildrenFirst (core.js:32275) at checkAndUpdateView (core.js:44276) at callViewAction (core.js:44637) at execComponentViewsAction (core.js:44565) at checkAndUpdateView (core.js:44278)

While adding matInput the date picker is not opening. Please help me out

2
angularangular-materialdatetimepicker
<mat-form-field> <input matInput formControlName="nextScheduledDate" mdc-datetime-picker="" date="true" time="true" type="text" id="datetimeedit" placeholder="Scheduled Date and Time" show-todays-date="" minutes="true" min-date="minDate" max-date="maxDate" edit-input="true" show-icon="true" ng-model="dateTimeEdit" name="datetimeedit" class=" dtp-no-msclear dtp-input mat-input"> </mat-form-field> – Abhinav Ashish
please update the question with html and typescript code – Plochie
I have added the html code – Abhinav Ashish
The error itself saying the <mat-form-field> should have MatFormFieldControl. Means inside MatFormField you cannot use normal input tags. You have to use matInput or some else mat field. – Surjeet Bhadauriya

2 Answers

1
votes

you can use Another approach for using DateTime picker in angular project i.e is by using mat-datetimepicker which is available to install by following commands.

npm i @mat-datetimepicker/core
npm i @mat-datetimepicker/moment

I made the below stackblitz link for practical representation of solution

https://stackblitz.com/edit/angular-vesksm-z5ahjm

References: https://github.com/kuhnroyal/mat-datetimepicker

0
votes

The following Angular Material components are designed to work inside a <mat-form-field>:

<input matNativeControl> & <textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>

Correct Example:

See matInput (It is MatFormFieldControl) is used inside the MatFormField

 <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

Wrong Example:

See input is used inside MatFromField which is not a MatFormFieldControl

 <mat-form-field>
    <input type="text placeholder="Input">
  </mat-form-field>