angular6 – 使用其他表单数据上载Angular 6文件

用户form.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../user.service';
import { FileUploader,FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

@Component({
  selector: 'user-form',templateUrl: './user-form.component.html',styleUrls: ['./user-form.component.scss']
})
export class UserFormComponent {
  angForm: FormGroup
  router: Router;

  constructor(private userservice: UserService,private fb: FormBuilder,private _route: Router) {
    this.createForm();
    this.router = _route;
  }

  createForm() {
    this.angForm = this.fb.group({
      first_name: ['',Validators.required],last_name: ['',// email: ['',Validators.required,Validators.email],email: ['',Validators.compose([Validators.required,Validators.email])],phone_number: ['',Validators.maxLength(10)])],profile_pic:[]
    });
  }


  addUser(first_name,email,phone_number,profile_pic) {
    var data = {
      first_name: first_name,last_name: last_name,email: email,phone_number: phone_number,profile_pic: profile_pic,}
    console.log(data);

    // this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }

    // public uploader :  FileUploader;

    // uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }
    this.userservice.addUser(data);
    this.router.navigate(['/pages/users/list']); //Redirection path
  }
}

用户form.component.html

<div class="row justify-content-center">
  <div class="col-lg-8">
    <nb-card>
      <nb-card-header>Add User</nb-card-header>
      <nb-card-body>
        <!-- <div [formGroup]="form"> -->
          <form [formGroup]="angForm" novalidate>
            <div class="row full-name-inputs form-group">
              <div class="col-sm-6 input-group">
                <input type="text" placeholder="First Name" formControlName="first_name" class="form-control" #firstName/>
              </div>
              <div *ngIf="angForm.controls['first_name'].invalid && (angForm.controls['first_name'].dirty || angForm.controls['first_name'].touched)" class="alert alert-danger" >
                <div *ngIf="angForm.controls['first_name'].errors.required">
                  First Name is required.
                </div>
              </div>
              <div class="col-sm-6 input-group">
                <input type="text" placeholder="Last Name" formControlName="last_name" class="form-control" #lastName/>
              </div>
              <div *ngIf="angForm.controls['last_name'].invalid && (angForm.controls['last_name'].dirty || angForm.controls['last_name'].touched)" class="alert alert-danger" >
                <div *ngIf="angForm.controls['last_name'].errors.required">
                  Last Name is required.
                </div>
              </div>
            </div>
            <div class="form-group input-group">
              <input type="email" placeholder="Email" formControlName="email" class="form-control" #email/>
            </div>
            <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)" class="alert alert-danger" >
              <div *ngIf="angForm.controls['email'].errors.required">
                Email is required.
              </div>
              <div *ngIf="angForm.controls['email'].errors.email">
                  Enter valid email.
                </div>
            </div>
            <div class="form-group input-group">
              <input type="number" placeholder="Phone Number" formControlName="phone_number" class="form-control" #phoneNumber/>
            </div>
            <div *ngIf="angForm.controls['phone_number'].invalid && (angForm.controls['phone_number'].dirty || angForm.controls['phone_number'].touched)" class="alert alert-danger" >
              <div *ngIf="angForm.controls['phone_number'].errors.required">
                Phone Number is required.
              </div>
              <div *ngIf="angForm.controls['phone_number'].errors.maxLength">
                  Phone Number must be 10 digits
                </div>
            </div>
            <div class="form-group input-group">
              <input type="file" class="form-control file-data" formControlName="profile_pic" #profilePic />
            </div>
            <div class="input-group">
              <!-- <input type="submit" class="btn btn-success btn-rectangle btn-demo ml-auto submit-btn" name="Submit" > -->
              <button (click)="addUser(firstName.value,lastName.value,email.value,phoneNumber.value,profilePic.value);" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-success btn-rectangle btn-demo ml-auto submit-btn">Submit</button>
            </div>
          </form>
        <!-- </div> -->
      </nb-card-body>
    </nb-card>

  </div>

</div>

使用表单数据上传文件时使用其他表单输入

字符串和文件通过表单数据上载到REST API.任何人都可以为此建议吗？提前致谢.