Question

我正在尝试上传图片，但我收到了错误

这是我的模板

<h3 class = "head">{{title}}</h3>

<form  [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">

<div class="row">

  <div class="form-group">     
     <label class="formHeading">firstname</label>
      <input type="text" id="facebook" class="form-control"  ngControl="firstname" #firstname="ngForm" >  
 </div>
   <div *ngIf ="firstname.touched">
     <div *ngIf ="!firstname.valid" class = "alert alert-danger">
         <strong>First name is required</strong>
      </div>  
  </div>


<div class="form-group">
    <label class="formHeading">lastname</label>
    <input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm" >  
</div>

   <div *ngIf ="lastname.touched" >
      <div *ngIf = "!lastname.valid" class = "alert alert-danger">
          <strong>Google name is required</strong>
      </div>
   </div>

     <div class="form-group">
    <label class="formHeading">image</label>
    <input type="file" id="facebook" class="form-control col-xs-3"  ngControl="image" #image="ngForm" >  
</div>

 <div class="form-row btn">

   <button type="submit" class="btn btn-primary pull-right butspace "    [disabled]="!form.valid">Save</button>
 </div>

   </div>

我的组件

import {Component} from '@angular/core';
import {Http, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Subject } from 'rxjs/Subject';
import {FORM_DIRECTIVES} from '@angular/common';
import {Control,FormBuilder,ControlGroup,Validators} from '@angular/common';
@Component({
templateUrl: './components/profile/profile.html',
  directives: [FORM_DIRECTIVES],})
   export class Profile {
     http: Http;

     form: ControlGroup;
    postResponse = new Person();

     constructor(fbld: FormBuilder,http: Http) {
      this.http = http;
     this.form = fbld .group({
  firstname: ['', Validators.required],
  lastname: ['', Validators.required]
  });
}
  onSubmit(form){
    //this.form = form;
   console.log(form);
    var headers = new Headers();
  //  headers.append('Content-Type', 'application/json');
    headers.append('Content-Type','application/x-www-form-urlencoded')       this.http.post('http://localhost/angular/index.php/profile/addprofile', JSON.stringify(form),{headers:headers})
         .map((res: Response) => res.json())
         .subscribe((res:Person) => this.postResponse = res);
    }
  }
  class Person{
   firstName:string;
   lastName:string;

  }

它显示错误＆＃34;无法找到控件＆＃39;图像＆＃39;在html文件＆＃34;并且我无法找到确切的问题，有人可能会在我的代码中提出错误。

Answer 1

我认为问题在于您对其中一条输入有ngControl="image"，但您从未在image中正式提出FormBuilder部分表单。 ngControl正在表单上查找image（初始化值），但找不到它。尝试将image添加到此处：

this.form = fbld .group({
    firstname: ['', Validators.required],
    lastname: ['', Validators.required],
    image: ['', Validators.required]
});

也许在这里：

class Person{
   firstName:string;
   lastName:string;
   image: any;
}

不确定图片的数据类型是什么，但这是一个开始。

找不到控制错误，无法从角度2上传图像

1 个答案: