我应该如何使用 Angular 6 处理我的动态复选框

Question

我有一组来自网络服务的类别：categories，以及一个包含选定类别的数组：selectedCategories

要显示所有复选框，我这样做：

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div class="row">
    <div *ngFor="let category of categories">
      <input type="checkbox" class="custom-control-input" [id]="category.id" formControlName="category"
             [checked]="categoriesSelected?.includes(category.id)">
      <label class="custom-control-label" [for]="category.id">{{ category.name | translate }}</label>
    </div>
  </div>
</form>

效果很好。

然后我构建我的 formGroup：

ngOnInit() {
    this.categoriesSelected = this.championships.map(championship => championship.category.id);
    this.formGroup = this.formBuilder.group({
      categories: this.formBuilder.array([{}])
    });
  }

现在，我需要的输出只是所选类别的 ID。

我对链接 formBuilder 和 formGroup 有点迷茫。

如果我在我的模板中添加 formControlName="categories"，在 input 标签中，所有数据都会消失。

我应该怎么做？

Answer 1

你很接近，你只需要将 categoriesSelected 传递给 this.formBuilder.array() 并进行一些轻微的标记编辑。在您的组件中：

  constructor(private formBuilder: FormBuilder) {
    this.myGroup = this.formBuilder.group({
      myCategory: this.formBuilder.array(this.categoriesSelected)
    });
  }

您可以使用 ngFor 的索引访问单独的 categories 数组来标记复选框：

<form [formGroup]="myGroup">
    <div *ngFor="let category of myGroup.controls['myCategory'].controls; let i = index">
        <input type="checkbox" [formControl]="category">
    <label>{{ categories[i].name }}</label>
    </div>
  Selected: <strong>{{ myGroup.get('myCategory').value }}</strong>
</form>

演示：https://stackblitz.com/edit/angular-vntktv

Answer 2

带有 Angular 示例的动态复选框

 musicForm: FormGroup;
 musicPreferences = [
 { id: 1, genre: 'Pop' },
 { id: 2, genre: 'Rock' },
 { id: 3, genre: 'Techno' },
 { id: 4, genre: 'Hiphop' }
 ];

 this.musicForm.get('selectAll').valueChanges.subscribe(bool => {
    this.musicForm
      .get('musicPreferences')
      .patchValue(Array(this.musicPreferences.length).fill(bool), { emitEvent: 
 false });
  });
 this.musicForm.get('musicPreferences').valueChanges.subscribe(val => {
  const allSelected = val.every(bool => bool);
  if (this.musicForm.get('selectAll').value !== allSelected) {
    this.musicForm.get('selectAll').patchValue(allSelected, { emitEvent: false 
 });
  }
});


  submit() {
// Filter out the unselected ids
const selectedPreferences = this.musicForm.value.musicPreferences
  .map((checked, index) => checked ? this.musicPreferences[index].id : null)
  .filter(value => value !== null);
// Do something with the result

}

   <form [formGroup]="musicForm" (ngSubmit)="submit()">
   <label>
    <input type="checkbox" formControlName="selectAll">
 Select/Deselect all
  </label>
  <label formArrayName="musicPreferences" *ngFor="let genre of 
   musicForm.controls['musicPreferences'].controls; let i = index">
  <input type="checkbox" [formControlName]="i">
  {{musicPreferences[i].genre}}
  </label>

  <button>submit</button>
  </form>

我应该如何使用 Angular 6 处理我的动态复选框

How should I handle my dynamic checkbox with Angular 6

angular

angular-reactive-forms