Achiel Volckaert
Achiel Volckaert

Reputation: 1014

Angular2 Bootstrap modal user inputs + image

I am using a bootstrap model to create and update groups. on the backend side, there are no issues. Below I have my ts and HTML code I used. the modal works fine, but I don't know how to return any values from my form to my ts file so i can use it in an API call.

also for an image I need formdata

in short: What's the issue: Returning user inputs(+image) in angular 2

!edit! the error i get is:

_co.save is not a function

html:

 <app-modal #modal>
   <div class="app-modal-header">
     header
   </div>
   <div class="app-modal-body">
<form #modalform="ngForm" (ngSubmit)="save(modalform.value)" >
       First name: <input type="text" name="FirstName" ngModel><br>
       Last name: <input type="text" name="LastName" ngModel><br>
       image: <input type="file" name="image" ngModel><br>
   </form>
   </div>
   <div class="app-modal-footer">
     <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
     <button type="button" class="btn btn-primary" (click)="modal.hide()">Save changes</button>
   </div>
 </app-modal>

TS:

 @Component({
   selector: 'app-modal',
   template: `
   <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
        [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" style=" background: rgba(0,0,0,0.6);">
     <div class="modal-dialog" style="padding-top: 25%;">
       <div class="modal-content">
         <div class="modal-header">
           <ng-content select=".app-modal-header"></ng-content>
         </div>
         <div class="modal-body">
           <ng-content select=".app-modal-body"></ng-content>
         </div>
         <div class="modal-footer">

           <ng-content select=".app-modal-footer"></ng-content>
         </div>
       </div>
     </div>
   </div>
   `
 })
 export class ModalComponent {

   public visible = false;
   public visibleAnimate = false;

   public show(): void {
     this.visible = true;
     setTimeout(() => this.visibleAnimate = true, 100);
   }
   public save(): void{

   }

   public hide(): void {
     this.visibleAnimate = false;
     setTimeout(() => this.visible = false, 300);
   }


   public onContainerClicked(event: MouseEvent): void {
     if ((<HTMLElement>event.target).classList.contains('modal')) {
       this.hide();
     }
   }
 }

Upvotes: 1

Views: 58

Answers (1)

Achiel Volckaert
Achiel Volckaert

Reputation: 1014

fixed it by placing the save function in the other component

Upvotes: 1

Related Questions