Populate input using #Input inside Bootstrap 4 modal - html

Question

I have a main page with a table that when a row is clicked on, it uses #Output to send out that row's data (I've already confirmed the data is being sent properly by using it in another place in the project). I then have a Bootstrap 4 modal that pops up when I click the button on the left below where it says "Data Point Information". What I need to do is take the data from the row that was clicked on, and populate the form inside the modal with it.
Main Page:
Modal:
HTML for the modal:
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog bodyWidth">
<div class="modal-content wide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Update Data Point</h4>
</div>
<div class="modal-body">
<form class="form-inline" [formGroup]="updateForm" (ngSubmit)="submitForm(updateForm.value)">
<div class="row">
<div class="form-group" [ngClass]="{'has-error':!updateForm.controls['dataPoint'].valid && updateForm.controls['dataPoint'].touched}">
<label>Data Point:</label>
<input class="form-control special" type="text" [formControl]="updateForm.controls['dataPoint']">
</div>
<div class="form-group move" [ngClass]="{'has-error':!updateForm.controls['ICCP'].valid && updateForm.controls['ICCP'].touched}">
<label >ICCP:</label>
<input type="text" class="form-control special" [formControl]="updateForm.controls['ICCP']">
</div>
<div class="form-group" [ngClass]="{'has-error':!updateForm.controls['startDate'].valid && updateForm.controls['startDate'].touched}">
<label>Start Date:</label>
<input [value]="getDate('start')" class="form-control special" type="text" [formControl]="updateForm.controls['startDate']" style="margin-right: 4px;">
</div>
<div style="display:inline-block">
<ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"></ngb-datepicker>
</div>
<button type="button" class="btn icon-calendar closest" (click)="showDatePick(0)"></button>
<div class="form-group" [ngClass]="{'has-error':!updateForm.controls['endDate'].valid && updateForm.controls['endDate'].touched}">
<label >End Date:</label>
<input [value]="getDate('end')" class="form-control special" type="text" [formControl]="updateForm.controls['endDate']">
</div>
<div style="display:inline-block">
<ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"></ngb-datepicker>
</div>
<button type="button" class="btn icon-calendar closer" (click)="showDatePick(1)"></button>
</div>
</form>
</div>
<div class="modal-footer">
*All Fields Are Required. End Date must be after Start Date
<button type="submit" class="btn" [disabled]="!updateForm.valid" data-dismiss="modal">Update</button>
<button type="button" (click)="resetForm()" class="btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Typescript for the modal:
#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){
this.updateForm = fb.group({
'dataPoint' : [DPS[0].tDataPoint, Validators.required],
'ICCP' : [DPS[0].tICCP, Validators.required],
'startDate' : [DPS[0].tStartDate, Validators.required],
'endDate' : [DPS[0].tEndDate, Validators.required]
}, {validator: this.endDateAfterOrEqualValidator})
}
resetForm(){
location.reload();
//this.updateForm.reset();
}
submitForm(value: any){
console.log(value);
}
public getDate(dateName: string) {
let workingDateName = dateName + 'Date';
let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month-1, this[workingDateName].day).getTime() : new Date().getTime();
this.updateForm.controls[dateName + 'Date'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
}
public showDatePick(selector):void {
if(selector === 0) {
this.startCheck = !this.startCheck
} else {
this.endCheck = !this.endCheck;
}
}
endDateAfterOrEqualValidator(formGroup): any {
var startDateTimestamp, endDateTimestamp;
for(var controlName in formGroup.controls) {
if (controlName.indexOf("startDate") !== -1) {
startDateTimestamp = Date.parse(formGroup.controls[controlName].value);
}
if (controlName.indexOf("endDate") !== -1) {
endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
}
}
return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
}
}
HTML from the main page that places modal there using it's selector (toSend is of type DataTable which is the data from the row I am sending from the main page's Typescript):
<update-validation [receivedRow]='toSend'></update-validation>
Since I'm using #Output and #Input, I'm not sure why receivedRow in my Typescript is undefined.

Answer 1

The reason is that when your component of modal initialized, there were not any receivedRow. You should control it with *ngIf directive and ngOnChange method like that;
//xyz is just any field on your parent component
//in html
<div *ngIf="xyz">
<update-validation [receivedRow]="xyz"></update-validation>
</div>
//in component of modal
ngOnChanges(){
if(receivedRow){
//do whatever you want
}
}