angular - 错误 : Cannot find control with unspecified name attribute

Question

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

上传组件-

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
    })
  }
}

Answer 1

问题源于这两行:

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

您没有通过 FormControl到这两个子组件，当在子组件中时，它试图读取:

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

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