I have a problem everywhere I use the mat date picker in the project:
ERROR TypeError: Cannot read properties of undefined (reading 'dateInput')
at MatDatepickerInput._onInput (datepicker.js:3145)
at MatDatepickerInput_input_HostBindingHandler (datepicker.js:3388)
at executeListenerWithErrorHandling (core.js:15308)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:15352)
at HTMLInputElement.<anonymous> (platform-browser.js:561)
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28659)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at ZoneTask.invokeTask [as invoke] (zone.js:487)
If I select the date using date picker it works fine, but when I m trying to edit it manually it generates that error and it happens everywhere in the project. For example, I have:
<div class="datepicker-wrapper mr-20">
<input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
<mat-datepicker-toggle [for]="fromPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</div>
I tried to update the material and moment-adapter versions from 12.2.5 to 12.2.12, but I receive the same error. Also I created a new project and it works fine there.
Does anyone encountered this until now? Thank you in advance!
matInput attribute is missing in the input element.
<input matInput [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
Try this
I had the same error. I resolved it by checking the provider MAT_DATE_FORMATS.
The reason of the js error is related to the wrong dateInput format configuration of MAT_DATE_FORMATS provider. Please, check your module where you provide the MAT_DATE_FORMATS and take into account on the property dateInput:
{
provide: MAT_DATE_FORMATS,
useValue: {
display: {
dateInput: '<check-the-format-here>',
}
}
}
Related
I have created a website angular7 i which i am using [ngxTimepicker] for select time.i have get the selected value after select from timepicker.i have used [(ngModel)] but i got following error in the console :
Error: Cannot assign to a reference or variable!
tell me anyone how to use [(ngModel)
] with [ngxTimepicker] and fire function after select value from model.check my below fiddle and tell what the wrong in my code?
<div class="col-sm-6">
<input aria-label="default time" [ngxTimepicker]="mStartTime" [value]="'05:11 pm'" [(ngModel)]="mStartTime"
(focusout)="setData()" readonly>
<ngx-material-timepicker #mStartTime></ngx-material-timepicker>
</div>
In the .ts file
Use this
export class Component implements OnInit {
#ViewChild("YOURTIMEPICKERNAME") ANYVARIABLE: ElementRef;}
To get the time value use:
onClick() {
console.log(this.ANYVARIABLE.time);}
ANGULAR JINDABAD!!!
I'm experimenting with ZAF V2 and ran into some issues, I'm using the app scaffolding at: https://github.com/zendesk/app_scaffold. I've been looking at documentation and tutorials the last few days with no luck.
I have two files:
form.hdbs
<form id="myForm">
<label for="name" class="sr-only">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
<button class="btn" id="sendBtn">Submit</button>
</form>
Hello {{name}}
and index.js:
import ZAFClient from 'zendesk_app_framework_sdk';
import View from 'view';
var client = ZAFClient.init();
const view = new View();
view.switchTo('form');
$('#sendBtn').on('click', function (e) {
e.preventDefault();
var name = $("#name").val();
view.switchTo('form', {
name: name
});
});
The first time I run the app and type a name / submit, the view reloads and the message shows Hello xxx, the second time I type in a name and hit submit, the app goes blank, no errors in console.
Has anyone run into this issue?
Any insight is greatly appreciated.
Likely what happened is, the click event fired which rendered the page as you would expect but then the form submits to an empty page. You'd need to avoid the form rendering as well.
This is a "fancy hello world" style app. Most probably once you start actually building a useful app you won't build it like this anyway :)
I have the next constraint in my domain object usuario/Usuario.groovy:
phone blank: false, matches: "[0-9 -+()]{3,15}"
And I have in i18n/messages_es.properties:
usuario.telefono.matches=Se admiten números, espacios y los caracteres: -+(). Se admiten entre 3 y 15 caracteres en total.
This is the error message if the phone doesn't match the pattern:
The translation of the message would be something like: "Please, adjust the requested format"
I have not any similar error message in any of the i18n/messages... files. It looks a client side error message as it appears instantly.
In create gsp there is the next code (I think the error message could come from here):
<g:hasErrors bean="${usuarioInstance}">
<bootstrap:alert class="alert-error">
<ul>
<g:eachError bean="${usuarioInstance}" var="error">
<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
</g:eachError>
</ul>
</bootstrap:alert>
</g:hasErrors>
How could I change this error message by a custom one?
The first thing you have to understand: this message is html form validation error and doesn't connected to your application messages. So the fix will be in html. Try to add oninvalid attribut to input tag:
<input type="text" name="phone" pattern="[0-9 -+()]{3,15}" required="" value="" id="phone" oninvalid="setCustomValidity('Please, type valid phone number')">
You can move 'Please, type valid phone number' to i18n file
Edit: if you use fields plugin add oninvalid attr with input- prefix.
<f:field bean="${usuarioInstance}" property="phone" input-oninvalid="setCustomValidity('Please, type valid phone number')"/>
I think you are missing 'invalid' as part of the message key.
Use the following error code for matches:
className.propertyName.matches.invalid = 'errorMessage'..
Still if it doesn't work ..try the following approach.
Add def messageSource in controller /service.
user.errors?.allErrors?.each{
println messageSource.getMessage(it, null)
};
Go through the following link which explains this better
http://johnrellis.blogspot.com/2010/02/retrieve-grails-domain-errors-from.html
In JS/HTML it's common to have things like <a onclick="func(event)">, how do I reference the event variable when I'm using dart? I get an error when I try to do this saying that event is not found.
A more complete example:
<input id="foo" type="text" on-change="itChanged($event)">
In the Dart file:
itChanged(Event event) {
print(event.target.id);
}
Ok, after some research it turns out you have to use $event.
I'm trying to create a image upload with the kendo editor.
I'm always getting an error:
ReferenceError: uid is not defined
...==E&&(E=1),g?(b&&(A+=-b),w&&(I+=-w),e=new
Date(Date.UTC(F,D,E,A,I,H,N))):(e=new ...
kendo.web.min.js (Zeile 11)
I'm using jQuery 1.8.3 and kendoui.web.2013.1.319.open-source
My code is as follow:
<div id="example" class="k-content">
<textarea id="editor" rows="10" cols="30" name="reply-content"></textarea>
</div>
<script>
$(document).ready(function () {
$("#editor").kendoEditor({
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/images/ImageBrowser/Read",
destroy: "/images/ImageBrowser/Destroy",
create: "/images/ImageBrowser/Create",
thumbnailUrl: "/images/ImageBrowser/Thumbnail",
uploadUrl: "/images/ImageBrowser/Upload",
imageUrl: "/images/ImageBrowser/Image?path={0}"
}
}
});
});
</script>
Has someone experienced the same issue?
You are probably returning a list of string, but the editor is waiting for an json result (name, type, size). You can check the demo with a sniffer to see what kind of results is expected from read/thumbnail, etc. Not very sure if you really must implement an server class for Kendo's client equivalent, but, by default, the result for Read is expected as Json for sure.
New finaly i got it to work. I used some workarounds but see your self.
You can also test the functionality on the site: http://jonas.dnsd.me/forum/topic?id=113
But stil it has some bugs like the url: /imageBrowser/?path=/image.jpg. I remove '/?path=' with a javascript function, but it works just for 3 images.
If you upload a image the window will not refreseh.
I would appreciate some ideas about the issues.
Now it is working like a charm ... see at http://jonas.dnsd.me/forum/topic?id=113
I updated to new source code