如何在 Angular 反应形式中使用复选框对象数组

Question

在使用反应式形式的 Angular 7 中，我试图构建一个复选框数组。我想使用对象数组而不是仅使用 [true, true, false] 作为结果。我的对象有一个名称、一个 ID 和一个布尔选定属性。

在我的打字稿中：

myForm: FormGroup

constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
        myOptionsArray: this.fb.array([
            {
                id: 1,
                name: 'Option 1',
                selected: false
            },
            {
                id: 2,
                name: 'Option 2',
                selected: true
            },
            {
                id: 3,
                name: 'Option 3',
                selected: false
            })
        ])
    })
}

我的模板：

<form [formGroup]="myForm">
    <div formArrayName="myOptionsArray">
        <div *ngFor="let myOption of myOptionsArray.controls; let i = index">
            <div formGroupName="{{ i }}">
                <input name="i" type="checkbox" [formControl]="myOption" />
                <label> {{ myOption.get('name').value }} </label>
            </div>
        </div>
    </div>
</form>

我无法获取要更新的相应对象中的选定属性。如何设法让每个复选框仅更新数组中选定的属性？

Answer 1

在解决我的问题之前被引导到一个已经回答的问题。对于任何想知道的人：我需要将对象包装在 a 中formbuilder group，这使得可以在表单中访问字段。我的工作代码：

myForm: FormGroup

constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
        myOptionsArray: this.fb.array([
            this.fb.group({
                id: 1,
                name: 'Option 1',
                selected: false
            }),
            this.fb.group({
                id: 2,
                name: 'Option 2',
                selected: true
            }),
            this.fb.group({
                id: 3,
                name: 'Option 3',
                selected: false
            })
        ])
    })
}

更新后的模板：

<form [formGroup]="myForm">
    <div formArrayName="myOptionsArray">
        <div *ngFor="let myOption of myOptionsArray.controls; let i = index">
            <div formGroupName="{{ i }}">
                <input type="checkbox" [formControl]="myOption.get('selected')" />
                <label> {{ myOption.get('name').value }} </label>
            </div>
        </div>
    </div>
</form>