[英]how to set date value in frontend with ngoninit in angular 5
i have an <input type="date">
which i want to be filled when the user enters the route. 我有一个
<input type="date">
,要在用户输入路线时填写。 By visiting the site the input field should already be the actual date. 通过访问该站点,输入字段应该已经是实际日期。 So i think
ngOnInit()
should be what i need. 所以我认为
ngOnInit()
应该是我所需要的。 But what do i have to do to have the actual date filled in as a value to the input field, when the user enters the route? 但是,当用户输入路线时,我该怎么办才能将实际日期作为值填写到输入字段中?
I already tried to achive this by searching the web but only found some old solutions for angularjs although i'm using angular 5 which is not compareable with angularjs. 我已经尝试通过搜索网络来实现这一目标,但是尽管我使用的是与angularjs不可比拟的angular 5,但仅找到了一些针对angularjs的旧解决方案。 The postings i found all pointed to the scope which is no longer existent.
我发现所有帖子都指向了已不存在的范围。
The Documentation for ngOnInit
also does not help me :/ ngOnInit
的文档也对我没有帮助:/
HTML 的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() {}
}
If i do like briosheje wrote in his comments it works, his answer doesn't :/. 如果我确实喜欢briosheje在他的评论中写的那么有效,那么他的回答就不:/。 And there is one more thing... by using his comment i get two big errors inside my console:
还有一件事...通过使用他的注释,我的控制台内部出现两个大错误:
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}">
If i now give a name to my <input type="date" [ngModel]="todaysDate | date:'dd-MM-yyyy'" (ngModelChange)="todaysDate = $event" [value]="todaysDate | date:'yyyy-MM-dd'">
the function of filling this field with the acutal date is gone and only TT.MM.YYYY stands there. 如果我现在给我的
<input type="date" [ngModel]="todaysDate | date:'dd-MM-yyyy'" (ngModelChange)="todaysDate = $event" [value]="todaysDate | date:'yyyy-MM-dd'">
使用生效日期填充此字段的功能已消失,只有TT.MM.YYYY在那里站立。 What can i do? 我能做什么?
It should be enough to add: 添加以下内容就足够了:
ngOnInit() {
this.dateArrival = new Date();
}
and change your HTML so that it will handle by itself the date to string and vice-versa, like suggested in this plunker (taken from another SO post): plnkr.co/edit/s5OMg2olU2yHI246nJOG?p=preview 并更改您的HTML,以便它可以自行处理日期(反之亦然),如该插件(从另一篇SO帖子中摘录 )中所建议的那样: plnkr.co/edit/s5OMg2olU2yHI246nJOG?p=preview
<input type="date" [ngModel] ="dateArrival | date:'yyyy-MM-dd'" (ngModelChange)="dateArrival = $event">
the ngModelChange
will trigger the change automatically and will handle the date convertion aswell. ngModelChange
将自动触发更改,并将处理日期转换。 The NgModel
, instead, will directly display the date through the date pipe NgModel
会直接通过日期管道显示日期
You can create a variable in your component.ts like: 您可以在component.ts中创建一个变量,例如:
todaysDate: Date = new Date();
Then in your template: 然后在您的模板中:
<input type="text" [value]="todaysDate">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.