두 가지 방법으로 하나의 날짜 모델에 두 요소를 바인딩하는 방법

Question

나는 날짜 선택 도구의 두 요소를 가지고 있으며, 몇 달 동안 하나는 몇 년 동안, 나는 그들과 자바 스크립트 날짜 개체 사이에 양방향 바인딩을 설정하려면, 내 질문은 다음과 같습니다 :

그렇게 할 수 있습니까? 만약 그렇다면 어떻게? 적어도이 동작을 에뮬레이트 할 수 없으면 어떻게해야합니까?

코드 예제 :

<select class="selectpicker form-control" required [(ngModel)]="exp.StartDate.Month" > 
    <option *ngFor="let obj of months" [value]="obj">{{obj}}</option>> 
</select> 


<select class="selectpicker form-control" required [(ngModel)]="exp.StartDate.Year"> 
    <option *ngFor="let obj of years" [value]="obj">{{obj}}</option>> 
</select> 

두 선택기 중 하나 년 개월 (0-11)와 배열의 형태로 데이터를 얻을.

Answer 1

쉬운 방법은 설정자와 함께 fecha 속성을 갖는 것입니다. 당신이

year:number; 
month:number; 
get fecha():any 
{ 
    return new Date(this.year,this.month-1,1) 
} 
console.log(year,month,fecha); 

이 구성 요소에 그래서 당신이 ngModel이있는 경우, [(ngModel)]

<select [value] = "exp.StartDate.Month" (input)="updateMonth($event.target.value)" > 
... 
</select> 
<select [value] = "exp.StartDate.Year" (input)="updateYear($event.target.value)"> 

//In your component 
updateMonth(month:number) 
    { 
    this.exp.StartDate.Month=month; 
    this.exp.StartDate.Value=this.exp.StartDate.Year+'-'+this.exp.StartDate.Mont+'-1'; 
    } 
    updateYear(year:number) 
    { 
    this.exp.StartDate.Year=year; 
    this.exp.StartDate.Value=this.exp.StartDate.Year+'-'+this.exp.StartDate.Mont+'-1'; 
    } 

을 분할하거나 값을 제어하는 ​​사용자 지정 양식 컨트롤을 만들 수 있습니다. 귀하의 exp.StartDate가 자바 스크립트 날짜인지 아닌지는 알 수 없습니다. 나는 자바 스크립트 Date 객체를 기대하는 사용자 정의 폼 컨트롤을 사용하여 코드를 작성한다. (문자열을 사용하여 코드를 변경하려고하면)

import { Component, forwardRef, HostBinding, Input } from '@angular/core'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 

//Really TODO change input to select 
@Component({ 
    selector: 'app-month-year', 
    template: ` 
    <input [disabled]="disabled" [value] = "month" (input)="updateMonth($event.target.value)" > 
    <input [disabled]="disabled" [value] = "year" (input)="updateYear($event.target.value)"> 
    `, 
    providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => MonthYearComponent), 
     multi: true 
    } 
    ] 
}) 
export class MonthYearComponent implements ControlValueAccessor { 

    month:number; 
    year:number; 


    // Allow the input to be disabled, and when it is make it somewhat transparent. 
    @Input() disabled = false; 
    @Input('value') value; 

    onChange: any =() => { }; 
    onTouched: any =() => { }; 

    updateMonth(month:number) 
    { 
    this.month=month; 
    this.value=this.getDate(); //<--change the "value" 
    this.onChange(this.value); 
    } 
    updateYear(year:number) 
    { 
    this.year=year; 
    this.value=this.getDate(); //change the value 
    this.onChange(this.value); 

    } 

    constructor() { } 

    registerOnChange(fn) { 
    this.onChange = fn; 
    } 

    registerOnTouched(fn) { 
    this.onTouched = fn; 
    } 

    writeValue(value) { //<--when receive a value 
    if (value) { 
     this.month=value.getMonth()+1; 
     this.year=value.getFullYear(); 

     } 

    } 
    setDisabledState(isDisabled: boolean): void { 
    this.disabled = isDisabled; 
    } 
    //It's better use a function to return the value 
    private getDate() 
    { 
    const date=new Date(); 
    date.setFullYear(this.year,this.month-1,1); 
    return date; 
    } 
}