我一直在使用角度。我想實作兩種方式系結，但我堅持使用以下代碼。
由于[(ngModel)]不再在 angular 12 中使用formGroup我無法找到解決方案
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:'' }
];
在這里，我想更改將在以下輸入中輸入的鏈接的值（最后一行第 6 行）
<div class="row">
<div *ngFor="let control of socialsArray.controls; let i = index;">
<input type="checkbox" (change)="getSelectedSocialsCards()" [formControl]="control" id="checkbox{{i}}">
<label for="checkbox{{i}}" >
<div [ngStyle] = "{'background-color' : socials[i].selected == true ? '#ededed' : '#fff'}">
<div >
<fa-icon [icon]="faCheckCircle" [ngClass]="socials[i].selected === true ? 'iconColor' : 'iconColor1'"></fa-icon>
</div>
<div >
<div >
<img src="/assets/images/social_media/{{socials[i].icon}}" width="40px" height="40px"
>
</div>
<div >
<div>
{{socials[i].name}}
</div>
</div>
</div>
</div>
<div [ngStyle] = "{'display' : socials[i].selected == true ? 'block' : 'none' }">
<div >
<label>
{{socials[i].name}} link
</label>
<input type="text" (change)="getSelectedSocialsCards()" formControlName="socialLink">
</div>
</div>
</label>
</div>
</div>
我已經socialLink在里面宣告了formGroup
socialLink:new FormControl(null, [Validators.required])
這是我的 component.ts 代碼
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});
}
到目前為止，我能夠將最后一個值插入到他的輸入欄位中，這就是所有鏈接的值。
我試圖解決這個問題，但找不到任何解決方案。如果有人可以幫助我，我將不勝感激。謝謝
uj5u.com熱心網友回復：
您可以在 formGroup 中使用 [(ngModel)] 在標簽中提及“名稱”。例如 <input type="checkbox" (change)="getSelectedSocialsCards()" [formControl]="control" [(ngModel)]="testcontrol" name="testcontrol" id= "checkbox{{i}}"> 像這樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/425185.html
標籤：javascript 有角度的 打字稿 形式 角12
上一篇：輸入型別號的最大長度
下一篇：根據表單內TextFormField()中的用戶輸入更新Text()，執行計算并在另一個TextFormField()中顯示結果