primeng p-dialog form submitが動作しない

Question

私はprimeng p-dialogコンポーネントからファイルをアップロードしたいと思います。しかしSubmitボタンは何もしていません。コンソールに例外はスローされません。 私はprimeng p-dialogの問題について多くのことを検索しました。これは私が得た最も近いものです。 Angular 2 Nested Modal Dialog with Primeng doesn't work しかし、appendTo = "body"も私にとってはうまくいかず、 "componenetref"のやり方がわかりません。私はネストされたものをやっていません。それは私のためにかなり簡単です。

私はprimeng 5.0.2

HTMLコードで角度5.0.3を使用しています：

<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コード：

export class MyComponent implements OnInit { 

    showImportDialog = false; 

    constructor() { 
    } 

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

これで間違っているのですか？

Answer 1

HTMLコード：

 <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コード：

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