primeng p-dialog form submit not working

Question

I want to do a file upload from primeng p-dialog component. But the Submit button there is not doing anything.There is no exception thrown in the console. I have searched a lot about primeng p-dialog issue and this is the closest one I got. Angular 2 Nested Modal Dialog with Primeng doesn't work But appendTo="body" also didn't work for me and I don't know how to do the "componenetref" thing. I am not doing any nested stuff though. It's pretty simple for me.

I am using angular 5.0.3 with 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;
  }
}

What's wrong with this?

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