Angular2 FormGroup - 如何确定哪个控件触发了值更改

标签 angular angular2-forms angular2-formbuilder

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

我正在像这样订阅 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,但我想避免这样做

最佳答案

使用嵌套表单组...将所有其他 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);
        })
    }

关于Angular2 FormGroup - 如何确定哪个控件触发了值更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45619711/

相关文章:

angular - 我在 Angular 2 中匹配密码验证时遇到错误

angular - ng2-auto-complete ngModel 不改变值

angular - 为什么 [disabled] ="canDisable"不适用于 Angular2 react 形式

Angular FormControl valueChanges 不起作用

twitter-bootstrap - ng2-bootstrap 中的 Typeahead 无法显示 Angular 2 中的项目

javascript - 从 Angular 2 组件调用纯 javascript 函数

angular - 用于 JWT 验证的 Google 公钥在哪里?

Angular:使用 AOT 时如何在运行时获取当前语言环境

angular - 表单控件设置值和更新有效性的方法

angular - 动态嵌套表单控件 Angular 2