wie man Datum im Frontend mit Ngoninit in Winkel 5

Question

<input type="date"> ein set, das ich möchte, wenn der Benutzer die Route eingibt. Beim Besuch der Website sollte das Eingabefeld bereits das tatsächliche Datum sein. Also ich denke, ngOnInit() sollte sein, was ich brauche. Aber was muss ich machen, damit das aktuelle Datum als Wert in das Eingabefeld eingegeben wird, wenn der Benutzer die Route eingibt?

Ich habe schon versucht, dies zu erreichen, indem ich im Web suchte, aber nur einige alte Lösungen für angularjs fand, obwohl ich angle 5 verwende, was nicht mit angularjs vergleichbar ist. Die Postings, die ich gefunden habe, wiesen auf den Bereich hin, der nicht mehr existiert.

Die Dokumentation für ngOnInit hilft mir auch nicht:/

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() {} 

} 

---

Wenn ich wie Brios tun Heje schrieb in seinen Kommentaren, es funktioniert, seine Antwort nicht: /. Und es gibt noch eine Sache ... durch seinen Kommentar mit erhalte ich zwei große Fehler in meiner Konsole:

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}"> 

Wenn ich jetzt einen Namen meiner <input type="date" [ngModel]="todaysDate | date:'dd-MM-yyyy'" (ngModelChange)="todaysDate = $event" [value]="todaysDate | date:'yyyy-MM-dd'"> die Funktion Füllen Sie dieses Feld mit dem acutal Datum geben ist gegangen und nur TT.MM.YYYY steht da. Was kann ich tun?

Answer 1

Es sollte ausreichen, um hinzuzufügen:

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

und Ändern Sie Ihren HTML-Code, so dass er das Datum selbst als String behandelt und umgekehrt, wie in diesem Plotter vorgeschlagen (von anoth er SO post): plnkr.co/edit/s5OMg2olU2yHI246nJOG?p=preview

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

die ngModelChange wird die Änderung automatisch auslösen und das Datum convertion als gut behandeln. Die NgModel, stattdessen, wird direkt das Datum durch die date pipe

Answer 2

Sie können eine Variable in Ihrem component.ts wie erstellen:

todaysDate: Date = new Date(); 

Dann in Ihrer Vorlage:

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