0
Angular2を使用すると、メインページのボタンを使用してポップアップするBootstrap 4モーダルにクリックされた行のデータを送信するテーブルがあります。モーダルには、クリックされた行のデータを編集用に取り込むフォーム入力が含まれています。私の問題は、1つまたは両方の日付フィールドを編集して送信すると、編集した次の行のフォーム入力に編集値が入力されますが、のみが最初にクリックされた行の日付を編集した場合です。例えばAngular2 populating Bootstrap以前にクリックされたデータを含む4つのモーダルフォーム入力
、行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と正しく表示されます。さらに、最初の2つのフォーム入力にはこの動作がありません。
私は各方法で変更検出を使用しようとしましたが、どれもこの問題では機能しません。また、receivedRowの日付をnullに設定しようとしましたが、どちらも動作しません。
メインページ（3の列の左側のボタンは、モーダルを開くものである）： 
モーダル： 
活字体：submitForm機能を改変
@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;
}
}