How to edit ngxdatatable using modal dialog Angular 2

Question

What I want to do

I have a list of office names and dept in my ngxdatatable. Each officename has an edit and delete button, which a user can use to edit and delete the officename/dept.

For the edit part, I want a modal dialog to pop whenever the edit button is clicked (linked to an edit function), and show the officename and dept details. and User can edit the officename and/dept save it.
What I have achieved

I managed to have the modal dialog pop when a user clicks the edit button. Somehow, I have a problem when passing the original value to the edit modal dialog.
My problem

I want to pass my original value to modal dialog (working on it) and allow the user to edit the officename/dept and save the edited detail.

My Code, this is my modal dialog

<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"> Date </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>

my component file

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()
    {
        /// getting all officefrom service
    }

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

        //SEND THIS VALUE TO POPUP DIALOG  

        this.editingData = rowDetails
        // this.editingData contain ALL THE SELECTED OFFICENAME AND DEPT DETAILS. 
        // SO I WANT TO DISPLAY THIS DATA IN MY MODAL DIALOG HTML.


    }

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

I keep getting officename undefined and I tried using editingData?officename and it started to display in my modal dialog. But, let's say the user only edits the officename and leaves the dept as the original data, then the value it captured is {officename:"newOfficename", dept:null}.

So I want the details to be properly edited and saved.

If the user edit only one (officename/dept) only that one should be changed while the remaining data remains untouched.

Julia Passynkova · Accepted Answer · 2017-04-15 17:07:34Z

1

When a row is selected for edit you probably have to patch the EditOfficeForm formGroup with editingData. Something like that:

this.EditOfficeForm.patchValue(this.editingData);

answered Apr 15, 2017 at 17:07

Julia Passynkova

18k6 gold badges36 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3431310 Over a year ago

hi Julia, you are correct, but I need to patch the value one by one. indeed ur answer did give me an idea. Tq so much

user3431310 Over a year ago

this.EditOfficeForm.controls['officename'].patchValue(this.editingData.officename);

Affaq Aslam · Accepted Answer · 2019-02-12 11:18:09Z

0

In order to show Modal, you can create a simple button anywhere like:

<button type="button" class="btn btn-primary"  data-target="#editModal" (click)="updateOffice(row)" data-toggle="modal" data-original-title="Edit">
        Edit
</button>

Don't forget to set id of your modal and data-target in your button as id of modal. Then to populate edit fields in form, You can do your updateOffice() like:

updateOffice(row: object){
  this.EditOfficeForm.setValue({
  officename: row.officename,
  dept: row.dept
});
}

answered Feb 12, 2019 at 11:18

Affaq Aslam

532 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to edit ngxdatatable using modal dialog Angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related