Here I created dynamic form to Update form value
I have a problem in bind the path of image at pointoIntrest array display component
Model arr.model.ts
export interface A{
name:string,
}
export interface section{
image:string
pointofIntrest : PointofIntrest[];
}
export interface PointofIntrest{
images:ImagewithAlt[];
}
constructor(public http: HttpClient, private fb: FormBuilder){
this.profile=this.fb.group({
name: ['', Validators.required],
sections: this.fb.array([this.createDestinationSection()])
})
}
createDestinationSection() {
return this.fb.group({
city: [''],
pointsOfInterests:
this.fb.array([this.createPointsOfInterests()])
})
}
this is the code we patched the value to name and city formControl
here find() is the method we used to get data for particular id value from database
this.find(this.id)
.subscribe((data) => {
const destinationSection = this.profile.get('sections') as FormArray;
destinationSection.clear();
data.sections.forEach((item) => {
item.pointsOfInterests.forEach((b) => {
const pointsOfInterest =
this.arrivalGuideService.newPointOfInterest();
(section.get('pointsOfInterests') as FormArray).push(
pointsOfInterest,
);
b.images.forEach((i) => {
const image: FormGroup = this.arrivalGuideService.newImageAlt();
(pointsOfInterest.get('images') as FormArray).push(
new FormGroup({
path: new FormControl(i.path),
alt: new FormControl(i.alt),
type: new FormControl(i.type),
}),
);
});
})
})
a.html
<div *ngFor="let pointsOfInterest1 of pointsOfInterest(destinationIndex).controls ; let pointsOfInterestsIndex=index">
<div [formGroupName]="pointsOfInterestsIndex">
<div *ngFor="let image of images(destinationIndex, pointsOfInterestsIndex).controls; let imageIndex=index">
<div [formGroupName]="imageIndex">
<div class="image-wrapper edit-highlight-img mr-2 mb-2 mt-2" >
<video
[src]="imagePath+**videoPath**"
heigh="100"
width="150"
controls
></video>
</div>
</div>
</div>
</div>
</div>
i need to set the path string to videoPath attribute
when we fetch the data using find method path data comes from back end following format like this
and also i need to bind image path of pointofinterest as well
