我已经以angular6 / 7的反应形式实现了日期时间选择器。而且,我什至避免对该数据时间选择器应用表单控件。 我的是angular2 datetimepicker-从'angular2-datetimepicker'导入{AngularDateTimePickerModule};
但是,我遇到错误-
ERROR TypeError: Cannot read property 'getMonth' of undefined
请帮助解决该错误。
<form (ngSubmit) = "addTask(addTaskForm.value)" [formGroup] = "addTaskForm">
<div class= "form-group">
<label>Task Id : </label>
<input type= "text" maxlength = "100" class= "form-control" placeholder = "Enter Task Id "
[formControl] = "addTaskForm.controls['addTaskId']" required>
<p style = "color:red" *ngIf= "addTaskForm.get('addTaskId').hasError('required')">*TaskId is required</p>
</div>
<div class= "form-group">
<label>Task Name : </label>
<input type= "text" maxlength = "1000" class= "form-control" placeholder = "Enter Task Name "
[formControl] = "addTaskForm.controls['addTaskName']" required>
<p style = "color:red" *ngIf= "addTaskForm.get('addTaskName').hasError('required')">*TaskName is required</p>
</div>
<div class= "form-group">
<div class="col-md-6">
<label>Start Date-Time : </label>
<!-- [formControl]="addTaskForm.controls['addStartDatetime']" -->
<angular2-date-picker style = "padding-left:50px;padding-right:50px;width:300px" [(ngModel)] = "date" [settings]="settings" required></angular2-date-picker>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm waves-light" data-dismiss="modal" (click)="centralLarge.hide()" mdbWavesEffect>Close</button>
<button type="submit" [disabled]="!addTaskForm.valid" class="btn btn-primary btn-sm waves-light" mdbWavesEffect>Save </button>
</div>
</form>
app.component.ts-
date: Date = new Date();
settings = {
bigBanner: true,
timePicker: true,
format: 'dd-MM-yyyy',
defaultOpen: false
}
constructor(private fb: FormBuilder) {
this.addTaskForm = this.fb.group({
'addTaskId': ['', Validators.required],
'addTaskName': ['', Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")],
'addDescriptionName': ['', Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")],
// 'addStartDatetime': ['', Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")],
'addStatusName': ['', Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")]
})
}
addTask(modalValue: any ) {
this.addTaskFormObject = {
'userId': localStorage.getItem('username'),
'taskId': modalValue.addTaskId,
'taskName': modalValue.addTaskName,
'descriptions': modalValue.addDescriptionName,
'startDatetime': this.date,
'status': modalValue.addStatusName
}
console.log("addTaskForm Object = ", this.addTaskFormObject)
}
答案 0 :(得分:0)
谢谢。我解决了查询。
app.component.ts-
date: Date = new Date();
settings = {
bigBanner: true,
timePicker: true,
format: 'dd-MM-yyyy hh:mm',
defaultOpen: false,
closeOnSelect: true
}
constructor(private fb: FormBuilder) {
this.addTaskForm = this.fb.group({
'addTaskId': new FormControl ('',[ Validators.required]),
'addTaskName':new FormControl ( '', [Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")]),
'addDescriptionName':new FormControl ( ['', Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")]),
'date': new Date(),
'addStatusName':new FormControl ( '',[ Validators.required, Validators.pattern("[A-Za-z0-9 @)(_-]{1,2500}")])
app.component.html
<div class= "form-group">
<label>Start Date-Time : </label>
<angular2-date-picker (onDateSelect)="onDateSelect($event)" [formControl] = "addTaskForm.controls['date']" [settings]="settings" required></angular2-date-picker>
</div>
})
}