I am in the process of creating a dynamic form with formArray and running into an issue. When I click on the AddItem button, it should create an input field for uploading files.
Here is the HTML code snippet I am using:
<div class="row m-auto col-md-12 pb-4">
<div class="col-md-2 col-xs-2 col-sm-2 col-lg-2 col-xl-2">
<button (click)="AddItem()" mat-stroked-button color="warn">
<i class="la la-plus"></i>
<label class="pr-2 pl-2">
Create New File
</label>
</button>
</div>
</div>
...
and this is the code in my TypeScript file:
@Input() private postId: number;
uploadFormGroup: FormGroup;
fileType = TypeFile;
fileUpload: FileUpload;
constructor(private formBuilder: FormBuilder, private postService: PostService) { }
ngOnInit(): void {
this.uploadFormGroup = this.formBuilder.group({
postId: [''],
files: this.formBuilder.array([]),
typeEnum: ['', Validators.compose([Validators.required])]
});
}
...
However, when I try to add a new item by clicking on the AddItem() button, I encounter the following error:
Cannot find control with path: 'files -> 0 -> postId'
What could be causing this problem?