Mixing
Angular 7 and angular material date picker is setting the button to disabled when receiving a date from mysql...
I have a material date picker, where it is set by a value sent from mysql database.
The button is always disabled, which it should not be as the date picker already contain a value. But when I change the value to another date using the date picker, the button is enabled.
Here is a stackblitz describing the issue.
And here the scripts (where I am using a static value of the date to simulate the same one from the server):
The value returned from the server is 2018-2-12 00:00:00 and displayed inside the date picker like 2/12/2018 on my project, but on stackblitz it is displayed as 2/12/2018 00:00:00.
The html script:
<form [formGroup]="formGroup">
<mat-card>
<mat-card-content>
<h2 class="example-h2">Datepicker</h2>
<mat-form-field color="warn" appearance="outline">
<input matInput id="date_added" [max]="maxDate" [matDatepicker]="picker" [value]="dateFormat"
formControlName="date_added" placeholder="Date Added">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-card-content>
</mat-card>
<button mat-raised-button color="warn" (click)="updateHouseholdData()" [disabled]="!formGroup.valid">
<mat-icon>update</mat-icon>Update
</button>
</form>
{{formGroup.controls.date_added.errors | json}}
<br>
{{formGroup.controls.date_added.value | json}}
Typescript:
export class AppComponent {
formGroup: FormGroup;
dateFormat;
constructor(private fb: FormBuilder)
{
this.formGroup = this.fb.group({
'date_added': new FormControl('', Validators.required)
})
}
ngOnInit()
{
this.dateFormat = '2/14/2018 00:00:00';
}
}
How to convert the date coming from mysql server to be readable by a material date picker and to make the save button enabled?
angular datepicker angular-reactive-forms angular7
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
add a comment |
I have a material date picker, where it is set by a value sent from mysql database.
The button is always disabled, which it should not be as the date picker already contain a value. But when I change the value to another date using the date picker, the button is enabled.
Here is a stackblitz describing the issue.
And here the scripts (where I am using a static value of the date to simulate the same one from the server):
The value returned from the server is 2018-2-12 00:00:00 and displayed inside the date picker like 2/12/2018 on my project, but on stackblitz it is displayed as 2/12/2018 00:00:00.
The html script:
<form [formGroup]="formGroup">
<mat-card>
<mat-card-content>
<h2 class="example-h2">Datepicker</h2>
<mat-form-field color="warn" appearance="outline">
<input matInput id="date_added" [max]="maxDate" [matDatepicker]="picker" [value]="dateFormat"
formControlName="date_added" placeholder="Date Added">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-card-content>
</mat-card>
<button mat-raised-button color="warn" (click)="updateHouseholdData()" [disabled]="!formGroup.valid">
<mat-icon>update</mat-icon>Update
</button>
</form>
{{formGroup.controls.date_added.errors | json}}
<br>
{{formGroup.controls.date_added.value | json}}
Typescript:
export class AppComponent {
formGroup: FormGroup;
dateFormat;
constructor(private fb: FormBuilder)
{
this.formGroup = this.fb.group({
'date_added': new FormControl('', Validators.required)
})
}
ngOnInit()
{
this.dateFormat = '2/14/2018 00:00:00';
}
}
How to convert the date coming from mysql server to be readable by a material date picker and to make the save button enabled?
angular datepicker angular-reactive-forms angular7
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
add a comment |
I have a material date picker, where it is set by a value sent from mysql database.
The button is always disabled, which it should not be as the date picker already contain a value. But when I change the value to another date using the date picker, the button is enabled.
Here is a stackblitz describing the issue.
And here the scripts (where I am using a static value of the date to simulate the same one from the server):
The value returned from the server is 2018-2-12 00:00:00 and displayed inside the date picker like 2/12/2018 on my project, but on stackblitz it is displayed as 2/12/2018 00:00:00.
The html script:
<form [formGroup]="formGroup">
<mat-card>
<mat-card-content>
<h2 class="example-h2">Datepicker</h2>
<mat-form-field color="warn" appearance="outline">
<input matInput id="date_added" [max]="maxDate" [matDatepicker]="picker" [value]="dateFormat"
formControlName="date_added" placeholder="Date Added">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-card-content>
</mat-card>
<button mat-raised-button color="warn" (click)="updateHouseholdData()" [disabled]="!formGroup.valid">
<mat-icon>update</mat-icon>Update
</button>
</form>
{{formGroup.controls.date_added.errors | json}}
<br>
{{formGroup.controls.date_added.value | json}}
Typescript:
export class AppComponent {
formGroup: FormGroup;
dateFormat;
constructor(private fb: FormBuilder)
{
this.formGroup = this.fb.group({
'date_added': new FormControl('', Validators.required)
})
}
ngOnInit()
{
this.dateFormat = '2/14/2018 00:00:00';
}
}
How to convert the date coming from mysql server to be readable by a material date picker and to make the save button enabled?
angular datepicker angular-reactive-forms angular7
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
I have a material date picker, where it is set by a value sent from mysql database.
The button is always disabled, which it should not be as the date picker already contain a value. But when I change the value to another date using the date picker, the button is enabled.
Here is a stackblitz describing the issue.
And here the scripts (where I am using a static value of the date to simulate the same one from the server):
The value returned from the server is 2018-2-12 00:00:00 and displayed inside the date picker like 2/12/2018 on my project, but on stackblitz it is displayed as 2/12/2018 00:00:00.
The html script:
<form [formGroup]="formGroup">
<mat-card>
<mat-card-content>
<h2 class="example-h2">Datepicker</h2>
<mat-form-field color="warn" appearance="outline">
<input matInput id="date_added" [max]="maxDate" [matDatepicker]="picker" [value]="dateFormat"
formControlName="date_added" placeholder="Date Added">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-card-content>
</mat-card>
<button mat-raised-button color="warn" (click)="updateHouseholdData()" [disabled]="!formGroup.valid">
<mat-icon>update</mat-icon>Update
</button>
</form>
{{formGroup.controls.date_added.errors | json}}
<br>
{{formGroup.controls.date_added.value | json}}
Typescript:
export class AppComponent {
formGroup: FormGroup;
dateFormat;
constructor(private fb: FormBuilder)
{
this.formGroup = this.fb.group({
'date_added': new FormControl('', Validators.required)
})
}
ngOnInit()
{
this.dateFormat = '2/14/2018 00:00:00';
}
}
How to convert the date coming from mysql server to be readable by a material date picker and to make the save button enabled?
angular datepicker angular-reactive-forms angular7
angular datepicker angular-reactive-forms angular7
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
asked Nov 20 '18 at 9:13
alim1990alim1990
99811332
99811332
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Convert your date into javascript date obj like this and patch To Form. Instead of setting value
Remove value from input
ngOnInit()
{
this.formGroup.get('date_added').patchValue(new Date('2/14/2018'));
// this.dateFormat = '2/14/2018';
}
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389665%2fangular-7-and-angular-material-date-picker-is-setting-the-button-to-disabled-whe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Convert your date into javascript date obj like this and patch To Form. Instead of setting value
Remove value from input
ngOnInit()
{
this.formGroup.get('date_added').patchValue(new Date('2/14/2018'));
// this.dateFormat = '2/14/2018';
}
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
add a comment |
Convert your date into javascript date obj like this and patch To Form. Instead of setting value
Remove value from input
ngOnInit()
{
this.formGroup.get('date_added').patchValue(new Date('2/14/2018'));
// this.dateFormat = '2/14/2018';
}
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
add a comment |
Convert your date into javascript date obj like this and patch To Form. Instead of setting value
Remove value from input
ngOnInit()
{
this.formGroup.get('date_added').patchValue(new Date('2/14/2018'));
// this.dateFormat = '2/14/2018';
}
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
Convert your date into javascript date obj like this and patch To Form. Instead of setting value
Remove value from input
ngOnInit()
{
this.formGroup.get('date_added').patchValue(new Date('2/14/2018'));
// this.dateFormat = '2/14/2018';
}
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
answered Nov 20 '18 at 10:04
Sheik AlthafSheik Althaf
26717
26717
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
add a comment |
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
Please check the updated one
– Sheik Althaf
Nov 20 '18 at 10:09
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389665%2fangular-7-and-angular-material-date-picker-is-setting-the-button-to-disabled-whe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
