Question

我正在使用文件上传文件制作一个表单，提交表单时，仅将表单输入数据插入数据库和文件中而不上传，请帮助我如何将两者同时插入？下面附有我的代码employee.component.ts和employee.component.html，请参见代码并回答此问题。

  employee.component.ts


import { Component, OnInit } from '@angular/core';
import {AppService} from '../app.service';
import {User} from '../users';
import { Router } from '@angular/router'; 
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
  form:any = {};
  msg: string = null;
  users: User[];
  filedata:any;

  fileEvent(e){
    this.filedata = e.target.files[0];
  }
  constructor(public http: HttpClient,private appService:AppService,private router: Router) { }

  ngOnInit() {
  }
  onSubmit(f:NgForm){ 
    var myFormData = new FormData();
    //console.log(this.form);
    const headers = new HttpHeaders();
          headers.append('Content-Type', 'multipart/form-data');
          headers.append('Content-Type', 'application/json');
          myFormData.append('image', this.filedata);
          this.http.post('http://127.0.0.1:8000/api/employee',myFormData, {
  headers: headers

}).subscribe(users => { users = users});

  }


}

emoloyee.component.html

<div class="container">
    <div class="textColor">{{ msg }}</div>
<h2>Angular Form</h2><br>
    <div class="row">
      <div class="col-md-6">
        <form name="form" (ngSubmit)="f.form.valid && onSubmit(f)" #f="ngForm" novalidate action="/">
          <div class="form-group">
            <label for="username">User Name</label>
            <input type="text" class="form-control" [class.is-invalid]="username.invalid && username.touched" name="username" [(ngModel)]="form.username" #username="ngModel"
              [ngClass]="{'is-invalid': f.submitted && username.invalid}" required placeholder="Enter your user name"/>
            <div *ngIf="f.submitted && username.invalid" class="invalid-feedback">
              <div *ngIf="username.errors.required">>> required</div>
            </div>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" name="email" [(ngModel)]="form.email" #email="ngModel" [ngClass]="{'is-invalid': f.submitted && email.invalid}" [class.is-invalid]="email.invalid && email.touched"
              required email placeholder="Enter your email address"/>
            <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
              <div *ngIf="email.errors.required">>> required</div>
              <div *ngIf="email.errors.email">>> must be a valid email address</div>
            </div>
          </div>
          <div class="form-group">
              <label for="mobile">Mobile</label>
              <input type="number" class="form-control" name="mobile" [(ngModel)]="form.mobile" #mobile="ngModel"
                [ngClass]="{'is-invalid': f.submitted && mobile.invalid}" required placeholder="Enter your mobile" pattern="[789][0-9]{9}" minlength="10" [class.is-invalid]="mobile.invalid && mobile.touched"/>
              <div *ngIf="f.submitted && mobile.invalid" class="invalid-feedback">
                <div *ngIf="mobile.errors.required">>> required</div>
                <div *ngIf="mobile.errors.pattern">>>Please enter a valid mobile number</div>
              </div>
            </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" [(ngModel)]="form.password" #password="ngModel"
              [ngClass]="{'is-invalid':f.submitted && password.invalid}" required minlength="6" placeholder="Create your password" [class.is-invalid]="password.invalid && password.touched"/>
            <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">
              <div *ngIf="password.errors.required">>> required</div>
              <div *ngIf="password.errors.minlength">>> must be at least 6 characters</div>
            </div>
          </div>
          <div class="form-group">
            <label for="image">Image</label>
            <input type="file" class="form-control" name="myFile" (change)="fileEvent($event)" [(ngModel)]="form.myFile" #myFile="ngModel"/>
          </div>
          <div class="form-group">
            <button class="btn btn-success">Register</button>
          </div>
        </form>
      </div>
    </div>
  </div>

Answer 1

您可以使用共享服务，它是singlton服务，主题类型可变。而您拥有的另一个选项可以使用路由参数。

角度如何在URL中传递两个变量？

1 个答案: