Question

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

在我的TypeScript中：

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 question already answered before解决了我的问题。对于任何想知道的人：我需要将对象包装在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>

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

1 个答案: