Даты не обязательны в Angular

Я использую Angular 7 для своего веб-приложения и имею следующий код в 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>

При вызове веб-API я получил такой объект JSON:

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

Это код компонента:

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);
    }
}

Все свойства привязаны правильно, кроме свойства myDate.

Я провел некоторое исследование и попробовал различные решения, но пока ни одно из них не работает.

Кто-нибудь из вас сталкивался с чем-то подобным?


angular angular-forms angular-bootstrap-calendar angular-date-format
person MikePR    schedule 18.07.2019    source источник
comment
Вы должны показать свой код компонента. Или как вы реализовали или интегрировали объект JSON в свой компонент.   -  person user3502626    schedule 19.07.2019
comment
Также попробуйте [(ngModel)] вместо [ngModel]   -  person user3502626    schedule 19.07.2019
comment
Вы хотите связать myDate: 2020/02/11, используя двустороннюю привязку данных и показать в пользовательском интерфейсе??   -  person Sayan    schedule 19.07.2019
comment
Обратите внимание, что id=myDate связывает строку myDate, id={{myDate}} связывает значение myDate.   -  person Robert garcia    schedule 19.07.2019
comment
@ user3502626 обновлено. Использование [(ngModel)] приводит к ошибке: не может быть канала в выражении действия.   -  person MikePR    schedule 19.07.2019
comment
@MikePR, поскольку ваша привязка к вводу текста, похоже, вы хотите сделать двустороннюю привязку. Вместо [ngModel] используйте [(ngModel)]. Потому что [ngModel] означает, что вы хотите использовать ngModel в качестве атрибута.   -  person user3502626    schedule 19.07.2019
comment
@user3502626 user3502626, даже если я удалю канал для форматирования дат и использования [(ngModel)], это не работает.   -  person MikePR    schedule 19.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы сделать двустороннюю привязку, вы должны сначала убедиться, что вы импортировали FormsModule в свой @NgModule в 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 {}

Затем в html-файле используйте [(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>

Я удаляю канал, потому что использование двухстороннего связывания с ним дало мне ошибку. проверьте этот thread для тренировки.

person user3502626    schedule 18.07.2019