• My Objective

  I have a collection of office names and departments in my ngxdatatable. Each office name is accompanied by an edit and delete button, allowing users to modify or remove the respective office name/department.

  Specifically for editing purposes, I am looking to implement a modal dialog that appears when the edit button is clicked (linked to an edit function). This dialog should display the details of the office name and department, enabling users to make edits to them and save the changes.

• Current Progress

  I have successfully implemented the pop-up modal when users click the edit button. However, I am facing difficulties passing the original values to the edit modal dialog.

• The Issue at Hand

  My main challenge lies in transferring the original values to the modal dialog (currently resolving this) and providing users with the ability to edit both the office name and department before saving the updated information.

Code Snippet: Modal Dialog Implementation

<div bsModal #editOffice="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form [formGroup]="EditOfficeForm" (ngSubmit)="EditOfficeForm.valid && updateOffice(EditOfficeForm.value)" novalidate>

                <div class="modal-header">
                    <button type="button" class="close" (click)="editOffice.hide()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit Office</h4>
                </div>

                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="text"> Office Name</label>
                        <div class="col-md-4">
                            <input #officeName type="text" id="officeName" name="officeName" class="form-control" formControlName="officeName" value="{{editingData.officeName}}">
                            <div class='redColor' *ngIf="EditOfficeForm.controls.officeName.touched">
                                <div *ngIf="EditOfficeForm.controls.officeName.hasError('required')">
                                    Required.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="text"> Department </label>
                        <div class="col-md-4">
                            <input #dept type="text" id="dept" name="dept" class="form-control  ng-pristine ng-valid ng-touched"
                                formControlName="dept" value="{{editingData?.dept}}">
                            <div class='redColor' *ngIf="EditHolidayForm.controls.dept.touched">
                                <div *ngIf="EditHolidayForm.controls.dept.hasError('required')">
                                    Required
                                </div>
                            </div>
                        </div>
                    </div>   

                    <button type="button" class="btn btn-space pull-right" (click)="editOffice.hide()" aria-label="Close"> Cancel </button>&nbsp;
                    <button class='btn btn-primary' type='submit' (click)="editOffice.hide()" [disabled]='!EditOfficeForm.valid'>Submit</button>

                    <br>

                </div>

            </form>
        </div>
    </div>
</div>

Component File Section

export class OfficeComponent {

    @Output() public rowEdited: EventEmitter<any> = new EventEmitter();
    public editingData:EditingRowData;

    EditOfficeForm: FormGroup;
    officename: FormControl;
    dept:FormControl;

    constructor(private fb: FormBuilder, public http: Http, private dataService: DataService) {

        this.EditOfficeForm= fb.group({
            officename: this.officename,
            dept:this.dept
        })

    }

    ngOnInit() {
        this.getAllOffice();
    }

    getAllOffice()
    {
        /// fetching all offices from service
    }

    editOffices(rowDetails:any): void
    {
        this.rowEdited.emit({rowDetails});
        console.log('row details', { rowDetails });

        //PASSING THIS VALUE TO THE POP-UP DIALOG  

        this.editingData = rowDetails
        // this.editingData CONTAINS ALL THE SELECTED OFFICE NAME AND DEPARTMENT DETAILS. 
        // HENCE, I WISH TO DISPLAY THIS DATA IN MY MODAL DIALOG HTML.

    }

    updateOffice(value: Object): void {
        //updating and sending to database
    } 
}

I keep encountering the issue where officename is undefined, and I attempted using editingData?officename which began displaying in my modal dialog. However, if the user only alters the office name, leaving the department as it was originally, the captured value becomes

{officename:"newOfficename", dept:null}

Hence, I aspire for the details to be edited accurately and saved correctly.

If the user modifies only one element (office name or department), solely that particular item should be changed, while preserving the rest of the data untouched.