formControlName 的数据绑定未在 slick carousel 中更新

Question

我尝试在光滑的轮播中使用动态表单，每个问题只有一张幻灯片。

我不明白为什么在我更改幻灯片后 formControlName 没有更新为新的 q.id...下面的代码实际上只更新了第一个控件（第一个 q.id 值）一次又一次...

<div ngxSlickItem *ngFor="let q of questions" class="slide">

    <div class="question-headline">q.question</div>
    <!--<div>{{q | json}}</div>-->

    <form class="choices" *ngIf="dynamicForm" [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
            <div class="choices" (change)="slickModal.slickNext(); debug(this.dynamicForm.value)">

              <div>{{ q.id }}</div>

              <input type="radio" id="1" [formControlName]=q.id [name]=q.id value="1">
              <label class="choicebutton" for="1">Oui</label>

              <input type="radio" id="3" [formControlName]=q.id [name]=q.id value="3">
              <label class="choicebutton" for="3">Partiellement</label>

              <input type="radio" id="2" [formControlName]=q.id [name]=q.id value="2">
              <label class="choicebutton" for="2">Non</label>

              <input type="radio" id="4" [formControlName]=q.id [name]=q.id value="4">
              <label class="choicebutton" for="4">Je ne sais pas</label>

             </div>
      </form>

在关联的 .ts 文件中：

   dynamicForm: FormGroup;
    
[...]

   ngOnInit(): void {
     ...
     this.dynamicForm = this.formBuilder.group({
    });
  }

[...]

    buildForm() {
       for (let q of this.questions) {
        this.dynamicForm.addControl(q.id, new FormControl('', Validators.required));
       }
       //console.log(JSON.stringify(this.dynamicForm.value))
      }

Answer 1

我通过实际使用 ngSwitch 解决了这个问题，如下所示：

 <ngx-slick-carousel class="carousel"
  #slickModal="slick-carousel"
  [config]="slideConfig"
  (init)="slickInit($event)"
  (breakpoint)="breakpoint($event)"
  (afterChange)="afterChange($event)"
  (beforeChange)="beforeChange($event)">
 <div ngxSlickItem *ngFor="let q of questions" class="slide">

    <div class="question-headline" [innerHTML]="q.question"></div>
    <!--<div>{{q | json}}</div>-->

    <form class="choices" *ngIf="dynamicForm" [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
      <div class="choices" [ngSwitch]="this.questions[this.slickModal.currentIndex].id" >

            <div class="choices" *ngSwitchCase=q.id (change)="slickModal.slickNext(); debug(this.dynamicForm.value)">
              <!--<div>{{ q.id }} : {{ this.questions[this.slickModal.currentIndex].id }}</div>-->

              <input type="radio" id="1" [formControlName]=q.id [name]=q.id value="1">
              <label class="choicebutton" for="1">Oui</label>

              <input type="radio" id="3" [formControlName]=q.id [name]=q.id value="3">
              <label class="choicebutton" for="3">Partiellement</label>

              <input type="radio" id="2" [formControlName]=q.id [name]=q.id value="2">
              <label class="choicebutton" for="2">Non</label>

              <input type="radio" id="4" [formControlName]=q.id [name]=q.id value="4">
              <label class="choicebutton" for="4">Je ne sais pas</label>

             </div>
          </div>
      </form>

</div>
</ngx-slick-carousel>

我希望这会对某人有所帮助:)

formControlName 的数据绑定未在 slick carousel 中更新

Data binding of formControlName is not updated in slick carousel

angular

angular-reactive-forms