错误：找不到具有未指定名称属性的控件答案

【问题标题】：Error: Cannot find control with unspecified name attribute错误：找不到具有未指定名称属性的控件
【发布时间】：2019-08-07 15:42:01
【问题描述】：

我正在尝试为文件上传创建一个可重用的组件。该组件有效，但我需要添加验证。它继续在控制台上给出相同的错误“错误：找不到具有未指定名称属性的控件”

上传组件-

export class UploadFilesComponent implements OnInit {

  @Input() placeholder: string;

  @Input()
  text: string;

  @Input()
  accept: string;

  @Input()
  validateFile: FormControl;

  show: boolean;

  ngOnInit() {

  }
}

上传组件 HTML-

<div class="file-upload">

  <mat-form-field *ngIf="!show">       

      <label class="upload-btn" for="file-upload" (click)="uploader.click()">UPLOAD</label>

      <input matInput #filename type="text" placeholder="{{placeholder}}" accept="accept" [formControl]="validateFile"/>

      <input hidden type="file" #uploader (change)="uploadFile(uploader.files, filename)"/>       

  </mat-form-field>

  <img class="upload-image" src="../../../../../assets/images/taa/attachment-l-secondary.svg"/>

  <mat-card *ngIf="show">
     <span><img class="upload-image" src="../../../../../assets/images/taa/attachment-l-secondary.svg"/></span> 
    <span><mat-card-content>{{text}}</mat-card-content></span>
    <span><img class="upload-image" src="../../../../../assets/images/taa/attachment-l-secondary.svg"/></span>
  </mat-card>

</div>

最后在appcomponent.html中调用上传文件组件-

<form [formGroup]="form">
<app-upload-files [placeholder]="'PAN'" [validateFile]="panFormControl"></app-upload-files>

<app-upload-files [placeholder]="'GST'"></app-upload-files>

<app-upload-files [placeholder]="'AAshar'"></app-upload-files>

<button [disabled]="form.invalid">NEXT</button>

</form>

Appcomponent.ts-

export class AppComponent {
  form: FormGroup;
  panFormControl : FormControl;

  constructor(private fb:FormBuilder){

  }
  ngOnInit(){
    this.panFormControl=new FormControl('', Validators.required);
    this.form = this.fb.group({
      'pan':  this.panFormControl
    })
  }
}

【问题讨论】：

什么是panFormControl？
问题更新请检查
哪一行给出了错误？
它可能在上传组件中，当我尝试将 validateFile 分配给 [formControl] 时，formcontrol 没有得到任何东西。
我们不要假设任何事情。粘贴您收到的确切错误消息

标签： angular

【解决方案1】：

问题源于这两行：

<app-upload-files [placeholder]="'GST'"></app-upload-files>
<app-upload-files [placeholder]="'AAshar'"></app-upload-files>

您没有将FormControl 传递给这两个子组件，当在子组件中它试图读取它时：

<input .... [formControl]="validateFile"/>

由于validateFile 不存在而引发错误。您需要将代码重构为您需要的内容，我想您可能还想向这些字段添加表单控件。

【讨论】：