如果没有点击事件,则动态复选框更新得不好

时间:2018-12-27 19:31:03

标签: angular forms

我有此供应商过滤器动态复选框。

<form  (submit)="submit(form.value)">
        <label  class="form-check" *ngFor="let supplier of suppliers;">

          <input class="form-check-input" type="checkbox"
                 (change)="filter(supplier.label, $event.target.checked)"
                 [checked]="(filters|json).indexOf((supplier.label).id) >= 0"
          >
          <span class="form-check-label">
                <span class="float-right badge badge-light round">{{supplier.count}}</span>
                  {{(supplier.label).name}}
              </span>
        </label>
        <button class="btn btn-block btn-outline-primary">Apply</button>{{form.value|json}} <-- the form.value is not updated if filters is updated, even the input is unchecked-->
</form>

我有两个组件,并且我正在使用@Input (): filters装饰器从第一个组件接收某种选定的复选框。
这是我的供应商过滤器组件:

export class SupplierFilterComponent {

    form: FormGroup;
    suppliersFormArray: FormArray;
    @Input() suppliers: Aggregation[];
    @Input() filters: Filter[];
    @Output() eventEmitterFilter = new EventEmitter<number>();

    constructor(formBuilder: FormBuilder) {console.log(this.filters);
        this.form = formBuilder.group({
            'suppliers': formBuilder.array([])
        });
    }

    filter($label: string, isChecked: boolean) {
        const supplier = JSON.parse($label);

        this.suppliersFormArray = <FormArray>this.form.controls.suppliers;

        if (isChecked) {
            this.suppliersFormArray.push(new FormControl(supplier));
        } else {
            const index = this.suppliersFormArray.controls.findIndex(x => x.value.id === supplier.id);
            this.suppliersFormArray.removeAt(index);
        }
    }

    submit($event) {
        this.eventEmitterFilter.emit($event.suppliers);
    }
}

通常,如果更新了过滤器的输入,则复选框形式的值将被更新。天气输入是否被选中(取决于@Input (): filters值)。

通常,如果filters进行更改,则会触发(change)="filter(..这部分。但是很遗憾,(change)没有被触发。 我不知道为什么form.value值的每次更新都没有更新@Input (): filters。 (仅当我单击时才更新)
如您所见,只有{strong> at 被选中,因为this.filters仅包含 at ,但是 form.value 经常包含另一个元素“ aspernatur” 。

我不明白为什么未选中输入但未更新 form.value 。有人可以帮我弄清楚如何更新表格。 filters值更改时的值。

0 个答案:

没有答案