检测表单中所有输入字段的更改答案

【问题标题】：Detect changes on all input fields in form检测表单中所有输入字段的更改
【发布时间】：2019-03-03 03:47:40
【问题描述】：

我正在使用响应式表单。它有很多字段（输入、选择等），带有保存和打印按钮。这里我有一个场景，即每当用户更改任何字段值时，都应该禁用打印按钮。最初打印按钮处于启用状态。我不知道如何处理整个表单输入。谁能帮我排序。

<div class="tab-content">
 <form [formGroup]="EditForm">
  <div class="form-group">
     <label for="title" class="control-label">
       <span>TITLE</span>                      
     </label>
     <div>
       <input type="text" size="27" formControlName="Title" pInputText>
     </div>
  </div>    

   <div class="form-group">
     <label for="title" class="control-label">
       <span>Department</span>                      
     </label>
     <div>
       <input type="text" size="27" formControlName="Department" pInputText>
     </div>
  </div>
</form>

下面是component.ts

 constructor(
    private route: ActivatedRoute,
    private formBuilder: FormBuilder,
   ){
    this.EditForm= this.formBuilder.group({
        Title: ['', Validators.required],
        Department: ['']
    });

【问题讨论】：

变化？？什么时候启用？可以听this.editForm.valueChanges
更改意味着编辑输入值。最初按钮处于启用状态。当用户编辑表单时，应禁用打印按钮。
是的，我明白了很多...看下面的答案，您可以获取valueChanges订阅下的所有表单数据

标签： angular angular-reactive-forms angular4-forms

【解决方案1】：

我们可以使用下面的代码：

dirty:- 如果某些控件被修改则为真

    <button  type="submit" [disabled]="EditForm.dirty" (click)="exportPdf()">
        <span >PRINT PAGE</span>
    </button>

【讨论】：

【解决方案2】：

您需要执行以下操作：

1）像这样在你的组件中声明一个属性，基本上它会订阅表单值的变化

私有值ChangeSub：订阅；

2) 更新您的 ngOnInit 以包含 ngOnInit 下面的行：

   public ngOnint() {
           this.valueChangeSub = this.EditForm.valueChanges.subscribe(
              (values) => {
                   // Code to disable the button
            });
    }

然后在你的 ngOnDestroy 方法中你必须取消订阅：

public ngOnDestry() {
   this.valueChangeSub.unsubscribe();
}

我们永远不要忘记取消订阅任何订阅。

【讨论】：

【解决方案3】：

在构造函数中添加以下代码。每当 EditForm 的任何控件的值发生变化时，都会执行以下代码。

this.EditForm.valueChanges.subscribe(
    (selectedValue) => {

      // Disable the print button here
      // Console.log(selectedValue);

    }
);

valueChanges是AbstractControl的一个属性，每当控件的值发生变化时都会发出一个事件，适用于FormControl、FormArray和FormGroup。

它返回任何类型的 Observable。

【讨论】：

我会在哪里调用这个函数？我的意思是在 ngOnChanges 内部？
你可以在构造函数或ngOnInit中添加它
我想在表单字段值发生变化时调用此函数。在 Angular 初始化指令的所有数据绑定属性后调用 ngOnInit
通过在 ngOnInit 或构造函数中添加这个，你所做的是，它会首先注册订阅。每当表单中的值发生变化时，都会执行此注册的订阅。
这很好，但是如果用户与表单元素交互，如何知道事件是否从 pageLoad 触发？