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
– user3502626, Commented Jul 18, 2019 at 21:22
Do you want to bind the "myDate": "2020/02/11", using two-way data binding and show on UI?? — Sayan
– Sayan, Commented Jul 18, 2019 at 21:24
Note this id="myDate" is binding the string "myDate", id="{{myDate}}" binds the myDate value — Robert garcia
– Robert garcia, Commented Jul 18, 2019 at 21:25
@user3502626 updated. Using [(ngModel)] throws the error: Cannot have a pipe in an action expression. — MikePR
– MikePR, Commented Jul 18, 2019 at 21:28

user3502626 · Accepted Answer · 2019-07-18 22:14:47Z

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.

Collectives™ on Stack Overflow

Dates not binding in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related