Angular 2 날짜 입력이 날짜 값에 바인딩되지 않습니다.

Angular 2 날짜 입력이 날짜 값에 바인딩되지 않습니다.

폼을 설정하려고 하지만 어떤 이유로 인해 HTML의 날짜 입력이 [(ngModel)]을(를) 사용했음에도 불구하고 개체의 날짜 값에 바인딩되지 않습니다.

html:

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

폼 구성요소:

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

사용자 클래스:

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

테스트 출력에서 현재 "새" 날짜가 개체의 값으로 표시되지만 입력이 사용자 개체의 날짜 값을 업데이트하거나 값을 반영하지 않으므로 양방향 바인딩이 모두 작동하지 않습니다.도움을 주시면 대단히 감사하겠습니다.

각도 2, 4, 5:

가장 간단한 방법: 플렁커

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">

[(ngModel)] 대신 다음을 사용할 수 있습니다.

// view
<input type="date" #myDate [value]="demoUser.date | date:'yyyy-MM-dd'" (input)="demoUser.date=parseDate($event.target.value)" />

// controller
parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    }
    return null;
}

parseDate 함수를 사용하지 않도록 선택할 수도 있습니다.이 경우 날짜는 날짜 유형이 아닌 "2016-10-06"과 같은 문자열 형식으로 저장됩니다(예를 들어 데이터를 조작하거나 데이터베이스에 저장할 때 부정적인 결과가 있는지는 시도하지 않았습니다).

사용자 구성 요소

let today: string;

ngOnInit() {
  this.today = new Date().toISOString().split('T')[0];
}

그리고 당신의 html 파일에.

<input name="date" [(ngModel)]="today" type="date" required>

.ts에서:

today: Date;

constructor() {  

    this.today =new Date();
}

.vmdk:

<input type="date"  
       [ngModel]="today | date:'yyyy-MM-dd'"  
       (ngModelChange)="today = $event"    
       name="dt" 
       class="form-control form-control-rounded" #searchDate 
>

DatePipe 사용

> // ts file

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

@Component({
....
providers:[DatePipe]
})

export class FormComponent {

constructor(private datePipe : DatePipe){}

    demoUser = new User(0, '', '', '', '', this.datePipe.transform(new Date(), 'yyyy-MM-dd'), '', 0, [], []);  
}

Angular 2는 완전히 무시합니다.type=date유형을 다음으로 변경하는 경우text당신은 그것을 보게 될 것입니다.input양방향 바인딩이 있습니다.

<input type='text' #myDate [(ngModel)]='demoUser.date'/><br>

다음은 더 나은 조언과 함께 좋지 않은 조언입니다.

내 프로젝트가 원래 사용된jQuery그래서 저는.jQuery datepicker각진 팀이 원래의 문제를 해결하기를 바랍니다.또한 크로스 브라우저를 지원하므로 더 나은 대체 제품입니다.참고로,input=dateFirefox에서는 작동하지 않습니다.

좋은 조언:꽤 괜찮은 것은 거의 없습니다.Angular2 datepickers:

• https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker

• https://github.com/MrPardeep/Angular2-DatePicker

• https://www.npmjs.com/package/ng2-datepicker

HTML5에 따라 다음을 사용할 수 있습니다.input type="datetime-local"대신에input type="date".

그것은 그것을 허용할 것입니다.[(ngModel)]입력 컨트롤에서 값을 읽고 쓰는 지시.

참고: 날짜 문자열에 'Z'가 포함된 경우 위의 솔루션을 구현하려면 날짜부터 'Z' 문자를 잘라내야 합니다.

자세한 내용은 Mozilla 문서의 이 링크를 참조하십시오.

최신 브라우저를 사용하는 경우 간단한 해결책이 있습니다.

먼저 템플릿 변수를 입력에 연결합니다.

<input type="date" #date />

그런 다음 변수를 수신 방법으로 전달합니다.

<button (click)="submit(date)"></button>

컨트롤러에서 매개 변수를 HTMLInputElement로 입력하고 HTMLInputElement의 메서드 값 AsDate를 사용합니다.

submit(date: HTMLInputElement){
    console.log(date.valueAsDate);
}

그런 다음 일반적인 날짜를 사용하여 날짜를 조작할 수 있습니다.

의값을설할수있다니습도의 할 수도 .<input [value]= "...">여느 때처럼

개인적으로, 단방향 데이터 흐름에 충실하려고 노력하는 사람으로서, 저는 제 구성 요소에서 양방향 데이터 바인딩을 멀리하려고 노력합니다.

다음과 같은 해결 방법을 사용할 수 있습니다.

<input type='date' (keyup)="0" #myDate [(ngModel)]='demoUser.date'/><br>

사용자 구성 요소:

 @Input public date: Date,

Typescript - app.component.ts 파일에서

export class AppComponent implements OnInit {
    currentDate = new Date();
}

HTML 입력 필드

<input id="form21_1" type="text" tabindex="28" title="DATE" [ngModel]="currentDate | date:'MM/dd/yyyy'" />

입력 필드 내에 현재 날짜가 표시됩니다.

언급URL : https://stackoverflow.com/questions/38175251/angular-2-date-input-not-binding-to-date-value