错误TypeError:无法读取未定义的属性'getMonth'

时间:2019-06-16 18:54:06

标签: angular forms datetimepicker

我已经以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)
  }

1 个答案:

答案 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>

    })
  }