Question

我正在使用bootstrap模型来创建和更新组。在后端方面，没有问题。下面我使用了我的ts和HTML代码。模态工作正常，但我不知道如何将任何值从我的表单返回到我的ts文件，所以我可以在API调用中使用它。

对于我需要formdata的图像

简而言之：问题是什么：在角度2中返回用户输入（+图像）

！编辑！我得到的错误是：

_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();
     }
   }
 }

Answer 1

通过将保存功能放在另一个组件中来修复它

Angular2 Bootstrap模态用户输入+图像

1 个答案: