Question

我从我的模板发布到我的angular2图片及其名称。

我从我的机器中选择图像：

<input type="file" multiple (change)="fileChange(input)" #input />

fileChange方法正在接收文件并将其保存在下面的img标签中，所以当我准备提交表单时，它就在那里：

<form [formGroup]="myForm" (ngSubmit)="submit()">
    <img [attr.src]='src' alt="" id="myphoto" name="myphoto" [formControl]="myphoto" />
    <input type="text" id="photoname" name="photoname" [formControl]="photoname" />
    <label for="photoname">Name</label>
</form>

在我的照片中

import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
.....
import { FormBuilder, FormControl, FormGroup} from "@angular/forms";

@Component({
  // selector and templateurl
})

export class SendMyPhoto {
    myForm: FormGroup;
    ....
    constructor(builder: FormBuilder) {
      this.photoname = new FormControl("", []);
      this.myphoto= new FormControl("", []);

      this.myForm= builder.group({
        photoname: this.photoname,
        myphoto: this.myphoto
      });
    }

当我从机器中选择图像时，出现此错误并且图像不显示：

core.umd.js：2838 EXCEPTION：错误 /js/app/templates/myphoto.html:22:88由以下原因引起：没有值访问器表格控件，名称为：'myphoto'

如果我删除

[formControl]="myphoto"

图像显示没有错误，但是我没有办法在打字稿中的formbuilder中引用它，所以我可以将它发送到我的服务器。

我已经尝试过使用formcontrolname而不是[formControl]，但行为没有区别

Answer 1

可能是：“mg标签不是有效输入，因此其中没有formControl的实现。这就是你得到错误的原因。第二件事是（我认为）你在转换img标签中的输入之前将src值赋给变量，这就是删除formControl时图像显示的原因。所以，我认为你应该从变量而不是formControl获取src。你怎么看？

您可以实现图像输入组件并使用ngmodel来获取图像数据。

http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

使用typescript

1 个答案: