传递参数时,将新日期视为无效

时间:2017-10-06 07:29:26

标签: angular date typescript ecmascript-6 angular-forms

我想比较两个日期。其中一个日期来自input="date",另一个日期是日期对象的新实例。

通过app.component.ts的数据绑定获取日期,该日期从日期输入中获取日期值。

给出错误>>>>> 无法读取未定义的属性'split'

 @Input() taskDt;
  dtArr = this.taskDt.split('-');
  taskDtform = new Date(this.dtArr[0], this.dtArr[1] - 1, this.dtArr[2]).getTime();
  currentDt = new Date().getTime();
  constructor(private render: Renderer2, private eleRef: ElementRef) { }

// App Component ts

import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { ITaskDetails } from './interfaces/task-details';
import { TaskService } from './services/task.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnChanges {
  currentDate: {};
  taskForm: FormGroup;
  taskArr: ITaskDetails[] = [];
  taskObj: ITaskDetails = {
    title: '',
    description: '',
    date: null
  };

  constructor(private taskSer: TaskService, private fb: FormBuilder) {
    this.currentDate = new Date().toISOString().substring(0, 10);
  }

  reset() {
    this.taskForm.reset();
    this.taskForm.get('date').patchValue(this.currentDate);
  }

  ngOnInit() {
    // this.taskForm = new FormGroup({
    //   'taskTitle': new FormControl('', Validators.required),
    //   'description': new FormControl('', Validators.required),
    //   'date': new FormControl(this.currentDate, Validators.required)
    // });

    this.taskForm = this.fb.group({
      taskTitle: ['', Validators.required],
      description: [''],
      date: [this.currentDate, Validators.required]
    });
    console.log(this.taskForm);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
  onSubmit() {
    // this.taskObj.title = this.taskForm.get('taskTitle').value;
    // this.taskObj.description = this.taskForm.get('description').value;
    // this.taskObj.date = this.taskForm.get('date').value;

    this.taskObj.title = this.taskForm.value.taskTitle;
    this.taskObj.description = this.taskForm.value.description ? this.taskForm.value.description : 'N/A';
    this.taskObj.date = this.taskForm.value.date;
    console.log(this.taskObj);


    this.taskSer.setData(this.taskObj);
    console.log({ ...this.taskObj });
    this.taskArr = this.taskSer.getdata();
    console.log(this.taskArr);

    this.taskForm.reset();
    this.taskForm.get('date').patchValue(this.currentDate);
  }

}

我也尝试过这样做,但它提供了invalid date error

  taskDtform = new Date(this.taskDt); <<<<<<<<< gives invalid date
  currentDt = new Date();

//这是任务列表组件,其中定义了变量taskLst

export class TaskListComponent implements OnInit {
  @Input() taskLst;
  constructor() { }

 ngOnInit() {
    console.log(this.taskLst);
  }

}

//这是双向约束

<tr *ngFor="let task of taskLst; let i = index" [taskDt]="task.date">

// app component html template

<section class="container">
  <app-task-list [taskLst]="taskArr"></app-task-list>
</section>

2 个答案:

答案 0 :(得分:1)

尝试将taskDt传递给if语句。并将currentDt转换为Iso子串,就像在构造函数中一样。然后比较两者。

taskDt错误,因为它没有初始化。最好直接通过酒店。

希望它有所帮助!

@Input() taskDt;  
  currentDt = new Date().toISOString().substring(0, 10);

答案 1 :(得分:0)

全部放入ngOnInit

@Input() taskDt;
taskDtform;
currentDt;

constructor(private render: Renderer2, private eleRef: ElementRef) implements onInit { }
ngOnInit()
{
     if (this.taskDt)
     {
         let dtArr = this.taskDt.split('-');
         this.taskDtform = new Date(dtArr[0], dtArr[1] - 1, dtArr[2]).getTime();
         this.currentDt = new Date().getTime();
     }
 }