Question

我使用的是Reactive表单。它具有许多带有“保存”和“打印”按钮的字段（输入，选择等）。在这里，我有一个场景，即当用户更改任何字段值时，都应禁用“打印”按钮。最初，“打印”按钮处于启用状态。我不知道如何处理整个表格输入。任何人都可以帮我进行排序。

<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。

它返回任何类型的Observable。

Answer 2

您需要执行以下操作：

1）像这样在您的组件中声明一个属性，基本上它将是对表单值更改的订阅

private valueChangeSub：订阅；

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>

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

3 个答案: