Как выбрать файл и загрузить файл, используя Angular 6 в реактивных формах - PullRequest
Новая
       25

Как выбрать файл и загрузить файл, используя Angular 6 в реактивных формах

0 голосов
/ 18 февраля 2019

Здесь нам нужно добавить тестовый пример, для этого нам нужно загрузить файл, используя тип входного файла, используя угловой 6 в реактивных формах.Загружая файл и отправляя его в ответ на API, мы получаем ответ в заголовках как 

test_template: "C:\fakepath\Copy of Task_angular_issue and change_logs.xlsx"

Но в ответ мы получаем как 

{
  "Status": "Error",
  "Message": "Following parameter(s) are missing: test_script,test_template",
  "Result": []
}

Может, я знаю какзагрузить файл

html файл 

<div class="dashboard">
  <form class="example-form" [formGroup]="userForm" (ngSubmit)="addAutomationCase(this.login_type)">
    <div class="example-full-width" style="display: inline-block">
      <label>Template Upload</label>
      <input type="file" formControlName="test_template" accept=".xlsx,.xls" (change)="onSelectFile($event)" #fileInput>
    </div>

    <div class="dashboardFooter">
      <button type="submit" class="button btn-primary" mat-raised-button mat-button color="primary"> Save </button>
      <button type="reset" class="button btn-default" mat-raised-button mat-button color="default" [routerLink]="['/auth/admin/Manage_Automation']"> Cancel </button>
    </div>
  </form>

</div>

ts файл 

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import {FormControl, FormGroupDirective,FormGroup, NgForm, Validators, FormBuilder} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

import {ActivatedRoute, Router} from "@angular/router";

import { AutomationCaseServiceProvider } from "../../../services/automationCase-service";
import { AuthServiceProvider } from "../../../services/auth-service";
import {MatSnackBar} from '@angular/material';
import { FilterTableComponent } from '../../../tables/filter-table/filter-table.component';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-add-automation',
  templateUrl: './add-automation.component.html',
  styleUrls: ['./add-automation.component.scss'],
  providers: [ AutomationCaseServiceProvider, AuthServiceProvider]
})
export class AddAutomationComponent implements OnInit {


  account: { test_template: string } = {
    test_template: ''
  };

  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
    private router: Router,
    public authService: AuthServiceProvider,
    public automationCaseService: AutomationCaseServiceProvider,
    public snackBar: MatSnackBar) {

  }

  ngOnInit() {

   **Initialize the Form Here**

    this.buildForm();

  }


  buildForm(): void {



    this.userForm = this.formBuilder.group({
        'test_template': ['', Validators.required]
      })
      console.log(this.userForm);
  };

  addAutomationCase() {
        if (!this.userForm.valid) {
          return;
        }
        else {
            this.automationCaseService.addautomationCase(this.userForm.value).subscribe(
              (resp) => {
                let UserData = JSON.stringify(resp);
                let data = JSON.parse(UserData);

                console.log(data.Message);
                if(data.Status == "Error"){
                  this.snackBar.open(data.Message,'Close', {
                    duration: 2000
                  });
                }

                else if(data.Status == "Success"){
                  this.snackBar.open(data.Message,'Close', {
                    duration: 2000
                  });
                this.router.navigate(['/auth/admin/Manage_Automation']);
                }
          });
      }
  }

  onSelectFile(event) {
    // console.log(JSON.stringify(event.target));
    // if (event.target && event.target[0]) {
    //   var reader = new FileReader();
    //   reader.readAsDataURL(event.target[0]); 
    //   // read file as data url
    //   alert(event.target.files[0]);
    // }
    let fileList: FileList = event.target.files;
    if(fileList.length > 0){
      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      console.log(event.target.files[0].name);
    }
    this.test_template = event.target.files[0].name;



          // need to run CD since file load runs outside of zone
          //this.cd.markForCheck()
  }

  onSelectscript(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]); // read file as data url
    }
  }

  matcher = new MyErrorStateMatcher();

}

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете загрузить файл в угловой реактивной форме, импортировав RxFormBuilder из @ rxweb /activetive-form-validators, создайте его объект и используйте метод toFormData (), который преобразует данные json в formData. Здесь я передал ссылкуapi на стороне сервера для вашей справки, он передаст fileObject на сервер.Когда вы добавляете [writeFile] = "true" в html, вам не нужно вызывать onSelectFile ($ event)

Component.ts: 

export class AddAutomationComponent implements OnInit {
   api:string = 'api/User'

  account: { test_template: string } = {
    test_template: ''
  };

  userForm: RxFormGroup;

  constructor(private formBuilder: RxFormBuilder,private http: HttpClient ) {

  }

  ngOnInit() {
    this.buildForm();
  }


  buildForm(): void {
    this.userForm = <RxFormGroup>this.formBuilder.group({
        'test_template': ['', Validators.required]
      })
     let formdata = this.userForm.toFormData()
       this.http.post(this.api, formdata); // This is fake uri, This is just for your reference.
  };
}

и в component.html:

<div class="dashboard">
  <form class="example-form" [formGroup]="userForm" (ngSubmit)="addAutomationCase(this.login_type)">
    <div class="example-full-width" style="display: inline-block">
      <label>Template Upload</label>
      <input type="file" formControlName="test_template" accept=".xlsx,.xls" [writeFile]="true">
    </div>

    <div class="dashboardFooter">
      <button type="submit" class="button btn-primary" color="primary"> Save </button>
      <button type="reset" class="button btn-default" color="default"> Cancel </button>
    </div>
  </form>

</div>

Stackblitz

...