How can i upload & Post image for individual dynamic form fields in Angular & MDBootstrap Drag and Drop file upload

问题

How can to Post dynamic form fields & uploaded images using angular HttpClient.

properties file: File | null; dynamicForm: FormGroup;

angular formbuilder

 ngOnInit() {
this.dynamicForm = this.formBuilder.group({
  numberOfProductsEnterings: ['', Validators.required],
  productsForm: new FormArray([])
});
}

getters for accessing the form values

get f() { return this.dynamicForm.controls; }
get p() { return this.f.productsForm as FormArray; }

// dynamically adds or removes form(s) fields

onChangeEnterings(e: { target: { value: number; }; }) {
const numberOfProductsEnterings = e.target.value || 0;

if (this.p.length < numberOfProductsEnterings) {
  for (let i = this.p.length; i < numberOfProductsEnterings; i++) {
    this.p.push(this.formBuilder.group({
      name: ['', Validators.required],
      brand: ['', Validators.required],
      color: ['', Validators.required]
    }));
  }

} else {

  for (let i = this.p.length; i >= numberOfProductsEnterings; i--) {
    this.p.removeAt(i);
  }
}
}

headers

httpOptions = {
headers: new HttpHeaders({
  'Content-Type': 'application/json'
})
};

image/file upload methods

onFileAdd(file: any) {
this.file = file;
// console.log(`this is file:: ${JSON.stringify(file, null, 4)}`);
}



onFileRemove() {
this.file = null;
}

add products method

addProducts(newPro: ProductInterface[]) {

return this.http.post<ProductInterface[]>(`http://localhost:8080/addProducts`,

  JSON.stringify(newPro), this.httpOptions ); }

on Form Submit

onAddProductsForm() {
this.submitted = true;
// this.loading = true;

// stop here if form is invalid
if (this.dynamicForm.invalid) {
  return;
}

const obj = Object.assign(this.dynamicForm.value, { file: this.file });

// display form values on success
console.log('SUCCESS!! :-)\n\n' + obj, null, 4));

this.addProducts(this.p.value)
  .pipe(first())
  .subscribe(
    (data: any) => {
      // console.log(`log storing: ${data.success}`);
      this.success = data.success || 'Successfully added';
    },
    error => {
      this.error = error;
    });
 }

this is the html form

<form [formGroup]="dynamicForm" (ngSubmit)="onAddProductsForm()">

<select class="px-3 form-control rounded" formControlName="numberOfProductsEnterings"
                (change)="onChangeEnterings($event)"
                [ngClass]="{ 'is-invalid': submitted && !!f.numberOfProductsEnterings.errors }">
                <option *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]" [disabled]="loading">{{i}}</option>
            </select>

<input type="text" id="name" class="form-control" formControlName="name">

<input type="text" id="brand" class="form-control" formControlName="brand">

<input type="text" id="color" class="form-control" formControlName="color">

<mdb-file-upload #uploader (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"></mdb-file-upload>

<button type="submit">Add Products</button>

</form>

来源：https://stackoverflow.com/questions/58977072/how-can-i-upload-post-image-for-individual-dynamic-form-fields-in-angular-md

标签

angular

mdbootstrap