Dates not binding in Angular

Question

I am using Angular 7 for my Web app and have the following code in html:

<div class="form-group col-md-6">
    <label for="myDate">My Date</label>
    <div class="input-group">
        <input 
            class="form-control" 
            placeholder="yyyy/mm/dd" 
            id="myDate" 
            name="myDate"
            [ngModel]="project.myDate | date: 'yyyy/MM/dd'" 
            ngbDatepicker #d="ngbDatepicker" 
            tabindex="9">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
        </div>
    </div>
</div>

When calling a Web API I got a JSON object like this:

{
    "id": 11,
    "description": "This is a test description",
    "budget": 1000,
    "myDate": "2020/02/11",
    ...
}

This is the component code:

export class ProjectEditComponent implements OnInit {

    project: Project;
    errorMessage: string;


    constructor(private myprojectService: ProjectService) { }

    ngOnInit() {

        this.myprojectService.getDataById(this.dataId).subscribe(
            data => (this.project = data, console.log(JSON.stringify(data))),
            error => this.errorMessage = error as any,
        );

        console.log(this.errorMessage);
    }
}

All the properties are bind properly except myDate property.

I have doing some research and trying different propose solutions , but none one seems to work so far.

Does any one of you face something similar?

You should show your component code. Or How did you implement or integrate the JSON object into your component. — user3502626, Jul 18 '19 at 21:22
Do you want to bind the "myDate": "2020/02/11", using two-way data binding and show on UI?? — Sayan, Jul 18 '19 at 21:24
Note this id="myDate" is binding the string "myDate", id="{{myDate}}" binds the myDate value — Robert garcia, Jul 18 '19 at 21:25
@user3502626 updated. Using [(ngModel)] throws the error: Cannot have a pipe in an action expression. — MikePR, Jul 18 '19 at 21:28
@MikePR as your binding is to a text input , looks like you want to make a two way binding. Instead of `[ngModel]`, use `[(ngModel)]`. Because `[ngModel]` means you want use `ngModel` as attribute. — user3502626, Jul 18 '19 at 21:32
@user3502626 even if I remove the pipe to format the dates and use [(ngModel)] is not working. — MikePR, Jul 18 '19 at 21:37

user3502626 · Answer 1 · 2019-07-18T22:14:47.643

To make a two way binding, you should first make sure you have imported FormsModule into your @NgModule in app.module.ts.

app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

//import this.
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], //register it
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then, in html file use [(ngModel)]:

<div class="form-group col-md-6">
    <label for="myDate">My Date</label>
    <div class="input-group">
        <input 
            class="form-control" 
            placeholder="yyyy/mm/dd" 
            id="myDate" 
            name="myDate"
            [(ngModel)]="project.myDate" 
            ngbDatepicker #d="ngbDatepicker" 
            tabindex="9">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
        </div>
    </div>
</div>

I remove the pipe because using the two way bindind with it gave me error. check that thread for a workout.

Dates not binding in Angular

1 Answers1