使用Angular 4为日期类型的HTML输入赋值

Question

我是 Angular 的新手，但我需要在加载页面时为日期类型的 html 输入分配一个日期。

我注意到，如果您将输入类型从日期更改为文本，则会将值分配给输入，但将值保留为未分配的日期。

有人会知道我哪里出错了。

跟随我的代码。

HTML

<input class="form-control" 
       type="date" 
       maxlength="10" 
       placeholder="dd/mm/yyyy"
       [(ngModel)]="carFilter.dataInicial"  
       (ngModelChange)="onDateChangeFim($event)"    
        min="{{auxFimMinDate}}"
        max="{{auxFimMaxDate}}">

组件示例

export class CarComponent implements AfterViewInit, OnInit {

    carFilter : CarModel;
    auxInMaxDate: Date  = new Date("2099-12-30");
    auxFimMinDate: Date  = new Date("1900-01-01");


    ngOnInit(): void {

        this.carFilter  = new CarModel();
        const data = new Date();        
        this.carFilter.dataInicial = data;

    }
}

模型示例

export class CarModel {

    offSet : number;
    dataInicial : Date;
    dataFinal : Date;

    constructor(
                offSet:number,
                dataInicial : Date,
                dataFinal : Date
                ){

        this.offSet = offSet;
        this.dataInicial = dataInicial;
        this.dataFinal = dataFinal;     

    }
}

图像输入

控制台谷歌浏览器

Answer 1

我能够通过分配我的 ngModel | 来解决问题。日期：'yyyy-MM-dd'。我必须研究为什么它会这样工作。如果有人想发表评论或提出更好的建议，我感谢您。 感谢所有帮助@Samy Sammour 和@Dmitriy Snitko 的人

<input class="form-control" 
   type="date" 
   maxlength="10" 
   placeholder="dd/mm/yyyy"
   [ngModel]="carFilter.dataInicial | date:'yyyy-MM-dd'"  
   (ngModelChange)="onDateChangeFim($event)"    
    [min]="auxFimMinDate"
    [max]="auxFimMaxDate">

Answer 2

变量 date 应该是来自 Date 的对象。不只是一个字符串。

因此，尝试添加一个真实的对象：

this.carFilter  = new CarModel();
var data = new Date('10/09/2018');        
this.carFilter.dataInicial = data;

<input type="date" [(ngModel)]="carFilter.dataInicial" />