Question

我在智能组件中没有几个表单域，在子组件中有一些表单域。我有一个打印并提交按钮。

用户输入所有字段并单击“打印”按钮，如果仅打印成功，则启用“提交”按钮。如果对任何字段的验证也失败，则将禁用“提交”按钮。

成功打印后- 1）假设用户在我想要禁用按钮的任何字段中进行了任何更改-可以，我可以使用@Input和@Output通过EVENT EMitter和方法调用来跟踪更改（有一种更好的方法请？？） 2）如果用户将更改恢复为原始值，即打印后的状态，我要启用“提交”按钮？我该怎么做？

Answer 1

对于您的问题的第一部分，您所需要的仅是带有角ngModel状态的开箱即用的东西。

在表单中使用ngModel不仅可以为您提供双向数据绑定。   它还会告诉您用户是否触摸了控件，值是否   更改，或者该值无效。

NgModel指令不仅跟踪状态，还跟踪状态。它更新控件   带有反映状态的特殊Angular CSS类。您可以   利用这些类名来更改控件的外观。

状态类，如果为true，则为类，如果为false，则控件已
visited. | ng-touched | ng-untouched The control's value has
changed. | ng-dirty | ng-pristine The control's value is
valid. | ng-valid | ng-invalid

https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel

对于第二部分，您可以执行以下操作：

public myForm: FormGroup; // form that is in page

this.myForm.valueChanges.subscribe(val => {
    if(val == originalFormValue){
        // code to enable submit button
    }
});

Answer 2

由于我认为这是很简单的前言，因此我不会赘述。

打印按钮应存储当前表单值的副本，如下所示：

<button (click)="handlePrint(testForm.value)">Print</button>

...

handlePrint(formValue) {
    this.printedFormValues = {...formValue};
}

仅当使用isEqual函数使两个对象相同时，提交按钮才会启用。

<button [disabled]="!isEqual(testForm.value, printedFormValues)">Send</button>

比较JavaScript中的对象不是最简单的事情，因此我使用了在其他地方找到的代码段。

Working example

Angular 6如何在一定间隔后跟踪表单字段的变化

2 个答案: