通过 Angular 将文件上传到响应式表单

Question

我按照本教程将文件上传到我的响应式表单中： https://netbasal.com/how-to-implement-file-uploading-in-angular-reactive-forms-89a3fffa1a03 但我有一个问题：“this.onChange 不是函数” 我的组件：

@Component({
  selector: 'first-page',
  templateUrl: './first-page.component.html',
  styleUrls: ['./first-page.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: FirstPageComponent,
      multi: true
    }
  ]
})
 @Input()progress;
  onChange:Function;
  private file:File|null=null;

  @HostListener('change',['$event.target.files']) emitFiles(event:FileList){
    const file= event && event.item(0);
    this.onChange(file);
    this.file=file;
  }
  writeValue(value:null){
    //clear file input
    this.host.nativeElement.value='';
    this.file=null;
  }
  registerOnChange(fn: Function){
    this.onChange = fn;
  }
  registerOnTouched(fn: Function){
  }



  
  ngOnInit(){
  this.profileForm= new FormGroup({
  nomeControl:new FormControl('' , [Validators.required, Validators.minLength(2), Validators.maxLength(30)]),
  cognomeControl:new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]),
  telefonoControl:new FormControl('', [Validators.required, Validators.minLength(10), Validators.maxLength(10)]),
  emailControl:new FormControl('', [Validators.required, Validators.email]),
  capControl:new FormControl('', [Validators.required,  Validators.minLength(5), Validators.maxLength(5)]),
  comuneControl:new FormControl('', ),
  provinciaControl:new FormControl({value:'', disabled:true}),
  regioneControl:new FormControl({value:'', disabled:true}),
  indirizzoControl:new FormControl('', [Validators.required]),
  codiceFiscaleControl:new FormControl('', [Validators.required, Validators.pattern(
    '[A-Za-z]+[A-Za-z]+[A-Za-z]+[A-Za-z]+[A-Za-z]+[A-Za-z]+[0-9]+[0-9]+[A-Za-z]+[0-9]+[0-9]+[A-Za-z]+[0-9]+[0-9]+[0-9]+[A-Za-z]$'
    )]),
  });

  this.objectivesForm=new FormGroup({
  obiettiviPersonaliControl:new FormControl('',[Validators.required]),
  obiettiviMotivazionaliControl:new FormControl('',[Validators.required]),});

  this.professionalObjForm=new FormGroup({
  obiettiviProfessionaliControl:new FormControl('',[Validators.required]),});

  this.lavoriPassatiForm=new FormGroup({
  positiveExControl:new FormControl('',[Validators.required]),
  negativeExControl:new FormControl('',[Validators.required]),
  commentsControl:new FormControl('')})

    this.knowledgeForm=new FormGroup({
    knowledge:new FormControl(''),
    conoscenzeForm:new FormArray([]),});

  this.uploadForm=new FormGroup({
  cvUpload1Control:new FormControl('',[Validators.required, requiredFileType('pdf','doc','docx')]),
  cvUpload2Control:new FormControl('',[Validators.required, requiredFileType('pdf','doc','docx')])});
  }
  onInputChange(event: MatSliderChange){
    this.myValue=event.value;
  }
  public checkErrorP=(controlName:string, errorName:string)=>{
    return this.profileForm.controls[controlName].hasError(errorName);
  }
  public checkErrorO=(controlName:string, errorName:string)=>{
    return this.objectivesForm.controls[controlName].hasError(errorName);
  } 
  public checkErrorPr=(controlName:string, errorName:string)=>{
    return this.professionalObjForm.controls[controlName].hasError(errorName);
  } 
  public checkErrorEx=(controlName:string, errorName:string)=>{
    return this.lavoriPassatiForm.controls[controlName].hasError(errorName);
  } 
  public checkErrorK=(controlName:string, errorName:string)=>{
    return this.knowledgeForm.controls[controlName].hasError(errorName);
  } 
  public checkErrorUp=(controlName:string, errorName:string)=>{
    return this.uploadForm.controls[controlName].hasError(errorName);
  } 
  addSkill(){
    //this.conoscenze.push((<HTMLInputElement>document.getElementById("knowledge")).value);
    this.knowledgeForm.value.conoscenzeForm.push(new FormControl({name: this.conoscenze[this.i] , value:this.myValue}));
    this.i++;}

我只是不明白错误是什么。 否则你能告诉我另一种通过反应形式上传文件的解决方案吗？（我最初的想法是实现 2 个文件上传的教程）

Answer 1

@MikeOne 是对的，我需要分离包含所有 controlValueAccessor 的组件。