【问题标题】:Angular2 FormGroup - How to determine which control triggered valuechangesAngular2 FormGroup - 如何确定哪个控件触发了值更改
【发布时间】:2018-01-19 01:22:14
【问题描述】:

每当表单发生更改时,我都想取消选中复选框。该复选框是该表单的一部分,因此我只想在值更改来自该复选框以外的任何其他控件时取消选中它。

我正在订阅 FormGroup 的值更改,如下所示

import { FormBuilder, FormGroup } from '@angular/forms';
export class App {
    form : FormGroup;
    constructor(private formBuilder: FormBuilder) {
        this.form = formBuilder.group({
            firstName: 'Thomas',
            lastName: 'Mann',
            ... many more fields ...
            checkbox: true
        })

        this.form.valueChanges.subscribe(data => {
            //if valueChange was not triggered by change in the checkbox
            this.form.get('checkbox').setValue(false);
        })
    }
}

我可以在每个其他控件中单独订阅 valueChanges,但希望避免这样做

【问题讨论】:

  • 是否应该将复选框设为只读(我从它的目的推测)?
  • 否复选框是您选中以同意您输入的所有内容都是真实的复选框之一。因此,如果您同意然后返回更改字段,我希望它取消选中。

标签: angular angular2-forms angular2-formbuilder


【解决方案1】:

使用嵌套表单组...将所有其他 formControl 分组到您要更新复选框值的单个 formGroup...

例如:

import { FormBuilder, FormGroup } from '@angular/forms';  

export class App {
    form : FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.form = formBuilder.group({
            'otherFormField': this.fb.group({
                firstName: 'Thomas',
                lastName: 'Mann',
                ... many more fields ...
            }),       
            checkbox: true
        })

        this.form.otherFormField.valueChanges.subscribe(data => {
            //if valueChange was not triggered by change in the checkbox
            this.form.get('checkbox').setValue(false);
        })
    }

【讨论】:

  • 这很好用,谢谢!我会支持你,但我没有足够的声誉
  • 很棒的解决方案!谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-10
相关资源
最近更新 更多