typescript - Angular 2 Bootstrap-ის თარიღის არჩევიდან ინპუტზე მნიშვნელობა არ გვეყენება

მაქვს ინპუტი, რომელსაც მინდა ავავსო Angular 2 Bootstrap დათპიკერით. როდესაც გვერდი იხსნება, მნიშვნელობა ინიცირებულია დღევანდელი თარიღით, გამოყენებით value="{{ getStartDate() | date:'fullDate'}}". მაგრამ როდესაც ვაკლიკებ ღილაკს და ვხსნი დათპიკერს და ვარჩევ ახალ თარიღს, მნიშვნელობა არ ავსებს ინპუტს. ასევე, აღარ შემიძლია ისევ ვაკლიკო ღილაკზე დათპიკერის დახურვისათვის.

HTML :

<form class="form-inline">
<div>
<div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}">
  <input value="{{ getStartDate() | date:'fullDate'}}" style="width:250px" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">
</div>
<div style="display:inline-block">
  <ngb-datepicker *ngIf="startCheck==true;" [(ngModel)]="dt" class="dropdown-toggle" [ngModelOptions]="{standalone: true}" style="position:absolute; z-index:1"></ngb-datepicker>
</div>
<button type="button" class="btn icon-calendar" (click)="showDatePick()"></button>
<button type="button" class="btn icon-search" [disabled]="!secondForm.valid"></button>
 </div>
 </form>

ტაიპსკრიპტი :

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'calendar-pick',
styleUrls: ['../app.component.css'],
templateUrl: './calendarpick.component.html'
})

export class CalendarPickComponent {
public dt:Date = new Date();
public startCheck: boolean = false;
//Might need to change this to complexForm, not sure yet
secondForm : FormGroup;

public constructor(fb: FormBuilder) {
this.secondForm = fb.group({
  'startDate' : [this.dt, Validators.required]
})
this.secondForm.valueChanges.subscribe( (form: any) => {
    console.log('form changed to:', form);
  }
);
}

public getStartDate():number {
return this.dt && this.dt.getTime() || new Date().getTime();
}

public showDatePick():void {
if (this.startCheck == false){
  this.startCheck = true;
} else {
  this.startCheck = false;
}
}
}

პასუხი #1

ng-bootstrap-ის თარიღის შერჩევის მოდელი არ არის Date() ობიექტი, ეს არის NgbDateStruct, რომელიც შედგება {month, day, year}

ასე რომ, სასურველი ქცევის მისაღწევად, კოდი გამოიყურება ასე:

import {DatePipe} from "@angular/common";

@Component({providers: [DatePipe]})

public constructor(fb: FormBuilder, private datePipe: DatePipe)
public dt: NgbDateStruct;
<...>
public getStartDate():number {
let timestamp = this.dt != null ? new Date(this.dt.year, this.dt.month-1, this.dt.day).getTime() : new Date().getTime();
this.secondForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'fullDate'));
}

მარკაპი იცვლება შემდეგნაირად: <input style="width:250px" [value]="getStartDate()" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">

აქაა სრული Plunker: https://plnkr.co/edit/zqGpoJZ1psKmST0S7Ix0?p=preview

შენიშვნა, რომ ng-bootstrap გუნდის თვის ინდექსი დაფუძნებულია 0-ზე და არა 1-ზე, რაც აღიზიანებს, როდესაც ნატიურ Date ობიექტთან ერთად იყენებთ NgbDate-ს.

ასევე, ის, როგორც არის დაწერილი თავდაპირველი მნიშვნელობით new Date().getTime(), ნიშნავს, რომ არასდროს გექნებათ ცარიელი მნიშვნელობა, რაც შეიძლება ყოველთვის სასურველი არ იყოს. და ეს ყოველთვის ჭუჭყიანი და ვალიდურია.