Question

使用Angular2，在我的主页面上，我有一个表格，可以将点击的任何行的数据发送到使用主页面上的按钮弹出的Bootstrap 4模式。模态包含表单输入，用于填充点击的行的数据以进行编辑。我的问题是，如果我编辑其中一个或两个日期字段并提交，那么这些编辑的值会填充我单击要编辑的下一行的表单输入，但仅如果我编辑了第一次单击的行＆＃ 39; s约会。

例如，如果第1行包含原始日期11/23/2016和11/26/2016，第2行包含原始日期12/20/2016和12/22/2016，我选择先编辑第1行并更改他们到10/22/2016和10/31/2016。在我打开模式以编辑第2行后，它的日期将为10/22/2016和10/31/2016。但是，如果我没有编辑第1行的日期，则第2行的日期会正确显示为12/20/2016和12/22/2016。此外，前两个表单输入没有此行为。

我已尝试在每种方法中使用更改检测，但这些都不适用于此问题。还尝试将receivedRow的日期设置为null，但这也不起作用。

主页面（3行左侧的按钮打开模态）：

模态：

打字稿：

@Component({
  selector: 'update-validation',
  styleUrls: ['../app.component.css'],
  templateUrl: 'update.component.html',
  providers: [DatePipe]
})

export class UpdateComponent {
  @Input() receivedRow:DataTable;
  public dt: NgbDateStruct;
  public dt2: NgbDateStruct;
  public startCheck: boolean = false;
  public endCheck: boolean = false;
  updateForm : FormGroup;

  constructor(fb: FormBuilder, private datePipe: DatePipe, private cdRef:ChangeDetectorRef){
  this.updateForm = fb.group({
    'dataPoint' : [null, Validators.required],
    'ICCP' : [null, Validators.required],
    'startDate' : [null, Validators.required],
    'endDate' : [null, Validators.required]
    }, {validator: this.endDateAfterOrEqualValidator})
  }

  ngOnChanges(){
    if(this.receivedRow){
      this.updateForm.controls['dataPoint'].setValue(this.receivedRow.tDataPoint);
      this.updateForm.controls['ICCP'].setValue(this.receivedRow.tICCP);
      this.updateForm.controls['startDate'].setValue(this.receivedRow.tStartDate);
      this.updateForm.controls['endDate'].setValue(this.receivedRow.tEndDate);
    }
   }

  resetForm(){
    location.reload();
    //this.updateForm.reset();
  }

  submitForm(value: any, originalRow: any){
    var dataPointID = originalRow.receivedRow.tDataPoint;
    for (let entry in DPS) {
      if (DPS[entry].tDataPoint === dataPointID) {
        DPS[entry].tDataPoint = String(this.updateForm.controls['dataPoint'].value);
        DPS[entry].tICCP = String(this.updateForm.controls['ICCP'].value);
        DPS[entry].tStartDate = String(this.updateForm.controls['startDate'].value);
        DPS[entry].tEndDate = String(this.updateForm.controls['endDate'].value);
      }
    }
  }

  getStartDate(){
    var month = this.receivedRow.tStartDate.substring(0,2);
    var day = this.receivedRow.tStartDate.substring(3,5);
    var year = this.receivedRow.tStartDate.substring(6,10);
    var dateToUse = new Date(Number(year),Number(month)-1,Number(day));
    let timestamp = this['startDate'] != null ? new Date(this['startDate'].year, this['startDate'].month-1, this['startDate'].day).getTime() : dateToUse.getTime();
    this.updateForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
  }

  getEndDate(){
    var month = this.receivedRow.tEndDate.substring(0,2);
    var day = this.receivedRow.tEndDate.substring(3,5);
    var year = this.receivedRow.tEndDate.substring(6,10);
    var dateToUse = new Date(Number(year),Number(month)-1,Number(day));
    let timestamp = this['endDate'] != null ? new Date(this['endDate'].year, this['endDate'].month-1, this['endDate'].day).getTime() : dateToUse.getTime();
    this.updateForm.controls['endDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
  }

  public showDatePick(selector):void {
    if(selector === 0) {
      this.startCheck = !this.startCheck
    } else {
      this.endCheck = !this.endCheck;
    }
    this.cdRef.detectChanges();
  }

  endDateAfterOrEqualValidator(formGroup): any {
    var startDateTimestamp, endDateTimestamp;
    for(var controlName in formGroup.controls) {
      if (controlName.indexOf("startDate") !== -1) {
        tartDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
      if (controlName.indexOf("endDate") !== -1) {
        endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
    }
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
  }
}

Answer 1

修改了submitForm函数，将ngModel的{{1}}和startDate设置为endDate，以便在null和getStartDate时被调用，getEndDate和timestamp函数中的getStartDate根据点击的行设置为日期，而不是之前绑定的getEndDate和startDate

endDate

Angular2填充Bootstrap 4模态表单输入与先前单击的数据

1 个答案: