primeng p-dialogformular abschicken funktioniert nicht

Question

Ich möchte einen Dateiupload von primeng p-dialog Komponente machen. Aber die Submit-Taste dort tut nichts. Es gibt keine Ausnahme in der Konsole geworfen. Ich habe viel über Primeng P-Dialog Problem gesucht und das ist die nächste, die ich habe. Angular 2 Nested Modal Dialog with Primeng doesn't work Aber appendTo = "body" funktionierte auch nicht für mich und ich weiß nicht, wie man das "componetretr" Ding macht. Ich mache jedoch keine verschachtelten Sachen. Es ist ziemlich einfach für mich.

Ich verwende Winkel 5.0.3 mit primeng 5.0.2

Html-Code:

<div class="container-fluid" style="margin-top:10px;"> 
    <div class="row"> 
    <div class="col-sm-6 pull-right"> 
     <div class="row"> 
     <div class="col-sm-12 text-right"> 
      <a class="btn btn-primary" 
      (click)="import()" 
      aria-label="Settings"> 
      Import 
      <i class="fa fa-pencil" aria-hidden="true"></i> 
      </a> 
      <a class="btn btn-danger" 
      href="/myapp/export.json" 
      aria-label="Settings"> 
      Export 
      <i class="fa fa-file-excel-o" aria-hidden="true"></i> 
      </a> 
     </div> 
     </div> 
    </div> 
    </div> 

    <p-dialog appendTo="body" 
      [(visible)]="showImportDialog" 
      modal="modal" width="400" height="200" 
      header="Import File" 
      [closable]="true" [showHeader]="true"> 
    <div class="container-fluid"> 
     <form action="/myapp/import" enctype="multipart/form-data" method="POST"> 
     <p> 
      <span>Upload : &nbsp;</span> <input type="file" name="initFileUpload" id="initFileUpload"> 
      <br> 
      <button type="submit">Import </button> 
     </p> 
     </form> 
    </div> 
    </p-dialog> 
</div> 

TS Code:

export class MyComponent implements OnInit { 

    showImportDialog = false; 

    constructor() { 
    } 

    import() { 
    this.showImportDialog = true; 
    } 
} 

Was mit diesem falsch?

Answer 1

Html-Code:

 <div class="container-fluid" style="margin-top:10px;"> 
      <div class="row"> 
      <div class="col-sm-6 pull-right"> 
       <div class="row"> 
       <div class="col-sm-12 text-right"> 
        <a class="btn btn-primary" 
        (click)="import()" 
        aria-label="Settings"> 
        Import 
        <i class="fa fa-pencil" aria-hidden="true"></i> 
        </a> 
        <a class="btn btn-danger" 
        href="/myapp/export.json" 
        aria-label="Settings"> 
        Export 
        <i class="fa fa-file-excel-o" aria-hidden="true"></i> 
        </a> 
       </div> 
       </div> 
      </div> 
      </div> 

      <p-dialog appendTo="body" 
        [(visible)]="showImportDialog" 
        modal="modal" width="400" height="200" 
        header="Import File" 
        [closable]="true" [showHeader]="true"> 
      <div class="container-fluid"> 
       <form (submit)=onSubmit()> 
       <p> 
        <span>Upload : &nbsp;</span> 
    <input type="file" #file name="data" id="fileUpload" (change)="onChange(file.files)"> 
        <br> 
        <button type="submit">Import </button> 
       </p> 
       </form> 
      </div> 
      </p-dialog> 
     </div> 

TS Code:

export class MyComponent implements OnInit { 

     showImportDialog = false; 
     // Will upload only one file at a time 
     // You can have an File[] here if you want to upload multiple files 
     uploadFile: File; 

     constructor(private httpClient: HttpClient) { 
     } 

     import() { 
     this.showImportDialog = true; 
     } 

     onChange(files) { 
     this.uploadFile = files[0]; 
     } 

     onSubmit(){ 
     const formData: FormData = new FormData(); 
     formData.append('data', this.uploadFile, this.uploadFile.name); 

     return this.httpClient.post<MyDTO>('/myapp/upload', formData).map(
     (response) => { 
     console.log('Response>' + JSON.stringify(response, null, ' ')); 
     return response; 
     } 
     ); 
    }