I tried following a tutorial on integrating file upload functionality into my reactive form, which can be found at the following link: . However, I've encountered an issue where I'm getting an error message stating "this.onChange is not a function". Here's a snippet of my Component:
@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(){
[remaining content goes here...]
}
onInputChange(event: MatSliderChange){
this.myValue=event.value;
}
public checkErrorP=(controlName:string, errorName:string)=>{
return this.profileForm.controls[controlName].hasError(errorName);
}
[more Check Error functions...]
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++;}
I'm struggling to pinpoint the exact cause of the error. Can anyone suggest an alternative solution for implementing file uploads via reactive forms? (Originally, I intended to follow the tutorial for implementing 2 file uploads)