Angular2 使用之前点击的数据填充 Bootstrap 4 个模态表单输入

Question

使用 Angular2，在我的主页上我有一个 table 将单击的任何行的数据发送到使用主页上的按钮弹出的 Bootstrap 4 模态。模态包含表单输入，这些表单输入填充了单击行的数据以供编辑。我的问题是，如果我编辑一个或两个日期字段并提交，这些编辑的值将填充我单击编辑的下一行的表单输入，但如果我先编辑它，则 ONLY单击行的日期。

例如，如果第 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。此外，前两个表单输入没有此行为。

我尝试过在每种方法中使用变化检测，但 none 方法对这个问题有效。还尝试将 receivedRow 的日期设置为空，但这也不起作用。

主页（第 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 的 startDate 和 endDate 设置为 null 以便当 getStartDate 和 getEndDate 被调用，getStartDate 和 getEndDate 函数中的 timestamp 被设置为基于单击的行的日期，而不是先前绑定的 startDate 和 endDate.

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);
      this['startDate'] = null;
      this['endDate'] = null;
    }
  }
}

Angular2 使用之前点击的数据填充 Bootstrap 4 个模态表单输入

Angular2 populating Bootstrap 4 modal form inputs with previously clicked data

typescript

bootstrap-modal

angular2-forms

angular