Обнаружить изменения во всех полях ввода в форме

Question

Я использую реактивные формы. В нем много полей (ввод, выбор и т. Д.) С кнопкой сохранения и печати. ​​У меня есть сценарий, который заключается в том, что всякий раз, когда пользователь изменяет любое из значений полей, кнопка печати должна быть отключена.Изначально кнопка печати находится во включенном состоянии. Я не знаю, как обрабатывать входные данные всей формы. Может ли кто-нибудь помочь мне разобраться в этом.

<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

Вам необходимо сделать следующее:

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 2

Мы можем использовать следующий код:

dirty: - true, если какой-то элемент управления был изменен

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

Answer 3

Добавьте приведенный ниже код в конструктор.Всякий раз, когда в каком-либо элементе управления EditForm происходит изменение значения, будет выполняться приведенный ниже код.

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

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

    }
);

valueChanges - это свойство AbstractControl, которое выдает событие каждый развремя изменения значения элемента управления, доступное для FormControl, FormArray и FormGroup.

возвращает наблюдаемый любого типа.