Question

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 文件时，此功能有效。

Answer 1

与您 formgroup 一起创建一个 Form Collection Group ，并将您的 formControlName 作为其中的一部分

尝试

ngOnInit() {
  this.companyInfoForm = formCollection.group({
        companyName: ["", Validators.required]
    });

}

Answer 2

您尚未初始化formGroup。

您需要在构造函数中对其进行初始化：

constructor() {
  this.companyInfoForm = new FormGroup();
}

但是，在检查完您的代码之后，我认为您做错了。您正在执行模板驱动的表单，但同时也具有一些反应表单组件。模板驱动的表单根本不需要formGroup。因此，您不必将[formGroup]放在<form>标记内。

但是，如果您打算进行反应形式，则HTML中不应包含[(ngModel)]。

您的companyInfoForm需要使用与companyinfomodel中相同的数据在构造函数中初始化。

看看form builder

上传图片文件时出现角度错误

2 个答案: