根据表单输入字段中的更改调用对话框窗口

Question

点击按钮后，我有一个名为NSUnderlineStyle.double.union(.patternDot).rawValue 的按钮，我正在Int内调用一个名为TextKit的组件，如下所示：

场景：：如果我在Add组件的add-customer中进行了任何更改，然后单击dialog window按钮，将再次调用input fields并显示以下消息：

这里的问题是：

只有在必填字段中进行了更改并单击“取消”按钮时，add-customer才会出现 ，但是如果进行了更改，我甚至想叫CANCEL更改任何输入字段和复选框。

这是stackblitz演示。

Answer 1

  

使用dirty函数必须非常简单。如果对表单进行了任何更改，它将返回true。

Ex：

if(this.addCusForm.dirty){
  //show modal
}

  

注意：不要忘记为每个控件添加formControlName。

这是工作副本-https://stackblitz.com/edit/angular-modal-issue-sgjc1f

Answer 2

您可以订阅表单valueChangesobservable，如果表单控件值中的任何一项发生更改，它将发出一个值，而且任何表单控件元素具有相同的api，因此您可以订阅from或特定控件以检查更改

ngOnInit() {
 this.addCusForm.valueChanges.subscribe( value => {
 ...
 })

 this.addCusForm.get('firstname').valueChanges.subscribe( value => {
 ...
 })

}