gpt4 book ai didi

typescript - 检查 FormArray 中的所有复选框 - Angular 2 Reactive Form

转载 作者:搜寻专家 更新时间:2023-10-30 20:42:25 24 4
gpt4 key购买 nike

我有一个 Angular 2 响应式表单,其中包含数据绑定(bind)的复选框列表。这工作正常,但现在我需要添加一个按钮来检查所有复选框。

下面是我的 FormGroup 的配置方式:

  private buildForm() {
this.groupForm = this._formBuilder.group({
bookId: this._formBuilder.control(null),
startDate: this._formBuilder.control(null),
groupTotal: this._formBuilder.control(null),
chapterGrouping: this._formBuilder.control("all"),
groupChapters: this.buildChapters()
});
}

private buildChapters() {
const chapters = this.chapters.map(chapter => {
return this._formBuilder.control(chapter.selected)
});
return this._formBuilder.array(chapters);
}

这是我的 HTML:

<div class="form-group">
<label for="">Select chapters</label>
<div *ngFor="let chapter of formChapters.controls; let i=index" class="checkbox">
<label>
<input type="checkbox" [formControl]="chapter" >
{{chapters[i].title}}
</label>
</div>
</div>

我如何访问 FormArray 以将所有复选框设置为已选中?

最佳答案

  1. 将 formGroupName 和 formControlName 添加到您的模板。 (让 Angular 2+ 知道 DOM 和 formGroup 结构是如何关联的。)
  2. 从模板中删除 [formControl]="chapter"。 (你不需要这个。)
  3. 向您的模板添加一个按钮。
  4. 使用 value 属性(获取有效数组)和 setValue 方法(将操作数组反馈回来)。

您的模板将如下所示:

<div class="form-group" formGroupName="groupChapters">
<label for="">Select chapters</label>
<div *ngFor="let chapter of formChapters.controls; let i = index" class="checkbox">
<label>
<input type="checkbox" formControlName="{{i}}">
{{chapters[i].title}}
</label>
</div>
<button (click)="checkAll()">Check all</button>
</div>

添加到类中的方法:

private checkAll() {
this.groupForm.controls['groupChapters'].setValue(
this.groupForm.controls['groupChapters'].value
.map(value => true);
);
}

一个工作的 Plunk:http://embed.plnkr.co/8yXBn1DhboiIwRIv7AS0/

关于typescript - 检查 FormArray 中的所有复选框 - Angular 2 Reactive Form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45747816/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com