检测表单中所有输入字段的变化

Question

我正在使用 Reactive forms.It 有很多字段（输入、select 等）可以保存和打印 button.Here 我有一个场景，每当用户更改任何打印按钮的字段值应该是 disabled.Initially 打印按钮已启用 state.I 不知道如何处理整个表单 inputs.Can 谁能帮我解决这个问题。

<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: ['']
    });

Answer 1

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

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

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

    }
);

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

它 returns 任何类型的 Observable。

Answer 2

您需要执行以下操作：

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

private valueChangeSub: Subscription;

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

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

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

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

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

Answer 3

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

脏：- 如果修改了某些控件则为真

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

检测表单中所有输入字段的变化

Detect changes on all input fields in form

angular

angular-reactive-forms

angular4-forms