上传图像文件时，我的角度有错误。
上传图像文件时，我的角度有错误。
提问于 2019-01-31 06:25:39
media.components.html
<div class="row justify-content-center" style="position:relative;top:105px;">
<div class="col-md-6">
<!-- form company info -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0" style="text-align:center;">Company Information </h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" role="form" name="form" [formGroup]="companyInfoForm" (ngSubmit)="companyInfoRequest()">
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Company Logo:</label>
<div class="col-lg-9">
<input #fileInput style="display:none;" class="form-control" type="file" (change)="onFileChangedForImage($event)"
accept=".png, .jpg, .jpeg, .gif, .bmp">
<button *ngIf="selectFilebutton" type="button" style="width:100%;padding:2px;" (click)="fileInput.click()">Select FIle</button>
<span *ngIf="imageFileCheck" style="text-align:center">{{imageFileName}}</span>
<!-- <input class="form-control" type="file" (change)="onFileChangedForImage($event)" accept=".png, .jpg, .jpeg, .gif, .bmp"> -->
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">
<span class="redtxt">*</span> Company Name:</label>
<div class="col-lg-9">
<input class="form-control" [(ngModel)]="companyinfomodel.company_name" type="text" name="name"
formControlName="companyName" />
<div *ngIf="submitted && f.companyName.errors" class="invalid-feedback">
<div *ngIf="f.companyName.errors.required">Please enter a Company Name</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<button class="btn btn-info">Next</button>
</div>
</div>
</form>
</div>
</div><!-- /form user info -->
</div>
</div>media.model.ts
export class CompanyInformationModel {
company_logo: File;
company_name: string;
}media.components.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { CompanyInformationModel } from './media.model';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-media',
templateUrl: './media.component.html'
})
export class MediaComponent implements OnInit {
constructor( private http: HttpClient, private router: Router) {
this.companyInfoForm = new FormGroup({
company_name: new FormControl()
});
}
companyinfomodel: CompanyInformationModel = {
company_logo: null,
company_name: ''
}
companyInfoForm: FormGroup;
submitted = false;
ngOnInit() {
}
// For company Logo
selectFilebutton:boolean = true;
imageFileCheck:boolean = false;
imageFileName:string;
onFileChangedForImage(event) {
this.companyinfomodel.company_logo = event.target.files[0];
console.log(event.target.files[0].name);
this.imageFileName = event.target.files[0].name;
this.selectFilebutton = false;
this.imageFileCheck = true;
}
// get f() { return this.companyInfoForm.controls; }
companyInfoRequest() {
this.submitted = true;
const uploadData = new FormData();
uploadData.append('company_logo', this.companyinfomodel.company_logo);
uploadData.append('company_name', this.companyinfomodel.company_name);
let id = 1;
uploadData.append('company', '1');
let body = uploadData;
this.http.post('http://127.0.0.1:8000', body)
.subscribe(response => {
console.log(response);
})
}
}控制台中的错误：
Error: Cannot find control with name: 'companyName'
at _throwError (forms.js:2144)
at setUpControl (forms.js:2052)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
at checkAndUpdateDirectiveInline (core.js:21997)
at checkAndUpdateNodeInline (core.js:23265)
at checkAndUpdateNode (core.js:23227)
at debugCheckAndUpdateNode (core.js:23861)
at debugCheckDirectivesFn (core.js:23821)在这里，我试图获得媒体形式的数据的角度。我也在我的app.module中导入了相同的组件。
如上面所示，它显示了控制台中的全局错误。
我只希望这些数据能到达我的控制台。
然后我会做我的服务器操作。
请看一下。
注意事项：当我删除company_name字段并只保留company_logo文件时，它可以工作。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-31 10:19:02
使用formControlName窗体组创建一个窗体集合组，并将您的作为其中的一部分
试试这个
ngOnInit() {
this.companyInfoForm = formCollection.group({
companyName: ["", Validators.required]
});
}Stack Overflow用户
发布于 2019-01-31 06:36:20
您还没有初始化formGroup。
您需要在构造函数中初始化它：
constructor() {
this.companyInfoForm = new FormGroup();
}但是，在查看了您的代码之后，我认为您做错了。您正在执行一个模板驱动的表单，但也有一些反应性表单组件。模板驱动的表单根本不需要formGroup。因此，您不必将[formGroup]放在<form>标记中。
但是如果你的意图是做反应式，你不应该有[(ngModel)]在你的HTML中。
您的companyInfoForm需要在构造函数中使用与companyinfomodel中相同的数据进行初始化。
看看表格建设者
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54454553
复制相关文章
相似问题
腾讯云开发者
