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不存在，因此引发错误。我认为，您需要将代码重构为所需的代码，也许您也想向这些字段添加表单控件。

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

1 个答案: