动态形式，包括修补

Question

我有一个用于更新 existing/create 新用户的表格。其中一个领域是他们可以参与的一系列活动。从服务器检索活动列表。编辑用户时，我想在表单（复选框）中显示所有可能的活动，并标记用户选择的活动。

但是，我在让它工作时遇到了问题。我已阅读以下博客文章： https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a https://jasonwatmore.com/post/2020/09/18/angular-10-dynamic-reactive-forms-example

结果，我想到了这样的事情：

component.ts:

form: FormGroup = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],    
    activities: this.fb.array([]),
  });

  activitiesForm$ = this.activitiesService.allActivities$.pipe(
    tap((activities) => {
      for (let activity of activities) {
        this.t.push(this.fb.group({ id: ['', Validators.required] }))        
      }
    }),
  );

在我的模板中：

<div *ngIf="activitiesForm$ | async as activities">    
    <div *ngFor="let activity of activities">
      <input class="form-check-input" type="checkbox" role="switch" formControlName="activity">
    </div>
  </div>

我明白为什么这不起作用。但是，我不知道该怎么做才能使它正常工作。

Answer 1

我为您创建了这个 stackblitz 应用程序来向您展示问题的解决方案

https://stackblitz.com/edit/angular-ivy-r2xaua?file=src/app/app.component.html

动态形式，包括修补

Dynamic forms including patching

forms

angular

angular-dynamic-forms