2017-12-06 25 views
1

나는 사용자가 경로를 입력 할 때 채우려는 <input type="date">을 가지고 있습니다. 사이트를 방문하면 입력 필드가 이미 실제 날짜가되어야합니다. 그래서 나는 ngOnInit()이 내가 필요한 것이라고 생각한다. 하지만 사용자가 경로를 입력 할 때 입력란의 값으로 실제 날짜를 채우려면 어떻게해야합니까?각도 5의 프론트 엔드에 날짜 값을 ngoninit으로 설정하는 방법

나는 웹을 검색하여 이미이 문제를 해결하려했지만 angularjs와 비교할 수없는 각도 5를 사용하고 있지만 웹 검색에서 오래된 해결책을 찾았습니다. 내가 발견 한 모든 게시물은 더 이상 존재하지 않는 범위를 가리켰다.

ngOnInit에 대한 문서도 나에게 도움이되지 않습니다/

HTML

<div class="form-group"> 
    <label>Eingangsdatum</label> 
    <input type="date" [(ngModel)]="dateArrival" id="dateArrivalPicker" value="" name="dateArrival" class="form-control"> 
</div> 

Compontent

@Component({ 
    selector: 'app-terminals-create', 
    templateUrl: './terminals-create.component.html', 
    styleUrls: ['./terminals-create.component.css'] 
}) 
export class TerminalsCreateComponent implements OnInit { 

    type: String; 
    serial: String; 
    layout: String; 
    dateArrival: Date; 
    activated: Boolean; 
    setup: String; 
    firmware: String; 
    installedAt: String; 
    createdBy: String; 
    createdDate: Date; 
    lastModified: Date; 
    lastModifiedBy: String; 
    notes: String; 
    macAddress: String; 


    constructor(
    private validateService: ValidateService, 
    private flashMessage: FlashMessagesService, 
    private authService: AuthService, 
    private router: Router 
) { } 

    ngOnInit() {} 

} 

내가 brios 같이 할 경우 heje는 자신의 의견에 다음과 같이 답했다. 그리고 한 가지 더있다 ... 그의 코멘트를 사용하여 내 콘솔 내부에 두 개의 큰 오류를 얻을 : 내가 지금 내 <input type="date" [ngModel]="todaysDate | date:'dd-MM-yyyy'" (ngModelChange)="todaysDate = $event" [value]="todaysDate | date:'yyyy-MM-dd'"> 에 acutal 날짜가이 필드를 충전의 기능을 이름을 지정하는 경우

Error: If ngModel is used within a form tag, either the name attribute must be set or the form 
     control must be defined as 'standalone' in ngModelOptions. 

     Example 1: <input [(ngModel)]="person.firstName" name="first"> 
     Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> 

입니다 가서 TT.MM.YYYY 만 거기에 서 있습니다. 내가 무엇을 할 수 있을지?

당신처럼 component.ts에서 변수 생성 할 수 있습니다
+1

을 통해 날짜를 직접 표시합니다. 컨트롤러 (구성 요소)와 html? 어쨌든'@ ViewChild'를 사용할 수도 있습니다. 그렇지 않으면 ngmodel이 ngOnInit (또는 더 나은 경우 ngOnChange)과 결합 된 트릭을 수행합니다. – briosheje

+1

html 및 구성 요소에 감사드립니다. 내가 가지고있는 유일한 질문은 원하는 날짜가 어디에서 왔는지입니다. 오늘이되면 ngOnInit :'this.dateArrival = new Date()'를 추가하면됩니다. 또한이 예제에 따라 ngModel 방식을 변경했습니다. https://plnkr.co/edit/s5OMg2olU2yHI246nJOG?p=preview. 이것은 날짜 분석 자체도 처리합니다. – briosheje

+0

답변으로 의견을 게시 할 수 있습니까? 그것은 plunkr 덕분에 나를 위해 charme처럼 일했습니다. 고마워요! :) – Sithys

답변

2

추가하기에 충분해야합니다 : 템플릿에서 다음

todaysDate: Date = new Date(); 

ngOnInit() { 
    this.dateArrival = new Date(); 
} 

및 이 plunker에서 제안 된 것처럼 문자열 자체에 날짜를 문자열로 처리하거나 HTML에서와 같이 날짜를 처리하도록 HTML을 변경하십시오 (양방향 어 SO 게시물) 다음 ngModelChange가 자동으로 변경을 트리거하고 날짜 convertion의 aswell을 처리 할 plnkr.co/edit/s5OMg2olU2yHI246nJOG?p=preview

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

. 대신 NgModeldate pipe

1

:

<input type="text" [value]="todaysDate">