angular 12 种反应形式的双向数据绑定

Question

我已经使用 angular 一段时间了。我想实现双向绑定，但我坚持使用以下代码。

由于[(ngModel)]在angular12内不再使用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:'' }

];

这里我想更改将在以下输入中输入的 link 的值（倒数第 6 行）

<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>

我已经在 formGroup

中声明了 socialLink

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});

}

到目前为止，我能够将最后一个值插入到输入字段中，这是所有 link 的值。

我已尝试解决该问题，但找不到任何解决方案。如果有人可以帮助我，我将不胜感激。谢谢

Answer 1

您可以在标签中的 formGroup mention 'name' 中使用 [(ngModel)]。例如像那样

angular 12 种反应形式的双向数据绑定

Two way data binding in angular 12 reactive forms

javascript

forms

typescript

angular

angular12