After working with angular for a while, I encountered an issue while trying to implement two-way binding. The code snippet below is where I'm facing difficulty.
Since the use of [(ngModel)] has been deprecated in Angular 12 within formGroup, finding a solution has become challenging.
socials = [
{ name: 'Facebook', icon: 'facebook.webp', selected: false, link:'' },
{ name: 'Instagram', icon: 'instagram.webp', selected: false, link:'' },
{ name: 'Twitter', icon: 'linkdin.webp', selected: false, link:'' },
{ name: 'Whatsapp', icon: 'whatsapp.webp', selected: false, link:'' }
];
The goal here is to update the value of the link entered in the input field (6th last line).
<div class="row">
<div class="col-6 col-lg-3 my-2" *ngFor="let control of socialsArray.controls; let i = index;">
<input class="form-check-input" type="checkbox" (change)="getSelectedSocialsCards()" [formControl]="control" id="checkbox{{i}}">
<label for="checkbox{{i}}" class="w-100">
<div class="card cursorIn" [ngStyle] = "{'background-color' : socials[i].selected == true ? '#ededed' : '#fff'}">
<div class="d-flex justify-content-end pt-2 pr-2 h-25">
<fa-icon [icon]="faCheckCircle" [ngClass]="socials[i].selected === true ? 'iconColor' : 'iconColor1'"></fa-icon>
</div>
<div class="card-body d-flex p-0 px-4 mt-0">
<div class="col-3 align-self-center font-weight-bold text-center cardIcon p-0">
<img src="/assets/images/social_media/{{socials[i].icon}}" width="40px" height="40px"
class="rounded-circle">
</div>
<div class="col-9 d-flex flex-column justify-content-start align-items-start cardRight">
<div>
{{socials[i].name}}
</div>
</div>
</div>
</div>
<div class="col-12 mt-2" [ngStyle] = "{'display' : socials[i].selected == true ? 'block' : 'none' }">
<div class="form-group">
<label>
{{socials[i].name}} link
</label>
<input type="text" class="form-control" (change)="getSelectedSocialsCards()" formControlName="socialLink">
</div>
</div>
</label>
</div>
</div>
I've initialized socialLink inside formGroup.
socialLink: new FormControl(null, [Validators.required])
This is the corresponding code from my component.ts file:
getSelectedSocialsCards() {
this.selectedSocialsCards = [];
this.socialsArray.controls.forEach((control, i) => {
this.socials[i].selected = false;
if (control.value) {
this.socials[i].selected = true;
this.socials[i].link = this.addForm.get('socialLink').value;
let linksValue = {'socialName': this.socials[i].name, 'socialLink': this.socials[i].link}
this.selectedSocialsCards.push(linksValue);
}
});
console.log(this.selectedSocialsCards);
this.socialError = this.selectedSocialsCards.length > 0 ? false : true;
this.addForm.patchValue({socialsCheck: this.selectedSocialsCards});
}
Currently, I can only retrieve the latest value inserted into the input field and it applies to all the links.
I've made various attempts to resolve the issue but haven't found a solution yet. Any assistance on this matter would be greatly appreciated. Thank you