Encountering an issue. I have a component with some logic for creating and deleting input fields
.ts
export class AppComponent implements OnInit {
resource: Resource[] = [];
fieldId = 0;
testArr = ['1', '2', '3', '4'];
ngOnInit() {
this.resource = this.getResource();
}
addRes(resource: Resource) {
resource.resourceInputFields = ['', ...resource.resourceInputFields];
console.log(this.resource);
}
removeRes(resource: Resource, index: number) {
resource.resourceInputFields.splice(index, 1);
}
getResource(): Resource[] {
return [
{
resourceLink: 'link',
resourceInputFields: [],
resourceId: '',
},
];
}
}
export interface Resource {
resourceLink: string;
resourceId: string;
resourceInputFields: string[];
}
.html
<div *ngFor="let res of resource">
<a>{{ res.resourceLink }}</a>
<button class="btn" (click)="addRes(res)">+</button>
<div class="fields">
<div *ngFor="let resourceField of res.resourceInputFields; index as i">
{{ i }}
<input type="text" [ngModel]="resourceField" />
<button class="btn" (click)="removeRes(res, i)">-</button>
</div>
</div>
</div>
Currently facing an issue where the splice method is behaving like shift, deleting the last element in the array.
I am trying to delete the field corresponding to the position of my plus button. Additionally, if there is any value present in the input field that I am going to delete, I also need to remove that value; StackBlitz