1

我正在使用这样的 Angular 2 Reactive Form 构建器：

<div class="questionSection">
    <b class="questionTitle">Remove records that don't have:</b>
    <div class="horizontalOptions">
        <label 
        class="horizontalOption"
        *ngFor="let choice of excludeRecords"
        >
            <input type="checkbox"
            [value]="choice.value"
            formControlName="excludedRecords"
            >
            {{choice.label}}
        </label>
    </div>
</div>

我希望该excludedRecords值是一个数组，这是生成 HTML 的变量：

excludeRecords = [
        {label: 'Full Mailing Address', value:'fullMailing', checked:false},
        {label: 'Full Office Address', value:'fullOffice', checked:false},
        {label: 'Email Address', value:'emailAddress', checked:false},
        {label: 'Phone #', value:'phoneNum', checked: false},
    ];

这就是我生成初始表单选择的方式：

constructor(private formBuilder: FormBuilder) {
    this.initialValues = {
        mainChoice: 'entireUSA',
        excludedRecords: [],
        stateChoice: 'all',
        includedStates: [],
        specialtyChoice: 'all',
        includedSpecialties: []
    }
    this.form = formBuilder.group(this.initialValues);
    this.formSelections = this.initialValues;

    this.form.valueChanges.subscribe(
        data => {
            console.log('form changed', data);
            this.formSelections = data;
        }
    );
}

现在它只是将值切换为真或假，但我希望每个复选框输入输出一个值数组，这可以使用 Angular2 Form Builder 吗？

4

1 回答 1

0

我找到了解决方案。就我而言，我有多个类别。类别具有表单的 id、名称和选定属性。

    <label *ngFor="let category of categories">
    {{category.name}}

    <input [checked]="book.category_ids.includes(category.id)"
           type="checkbox"
           id="{{category.id}}"
           value="{{category.name}}"
           formControlName="category_ids"
           (change)="updateCheckedOptions(category.id, $event)">
    </label>

每次选中复选框时，我都会更新类别。此时 category_ids 设置为 true 或 false。在提交表单之前，我使用所选值手动更新 category_ids 字段。

于 2017-01-28T15:43:38.077 回答