Angular 检查反应形式值是否从初始值更改

我有一个反应式表单，其中有3个控件，我想检测表单的更改。我已经创建了一个表单的值更改方法，并订阅了它。现在，每当它的任何控制值发生变化时，都会发出事件

如果用户向这3个控件的ant添加了任何值并试图退出页面，那么我想提示一个模式，表单中有未保存的更改

我如何能够检查表单更改时发出的值与初始值不同？

public createGroupForm : FormGroup;

ngOnInit() {
  this.createGroupForm = this._formBuilder.group({
      groupName: new FormControl("", [Validators.required]),
      groupPrivacy: new FormControl(null, [Validators.required]),
      groupTagline: new FormControl('')
  });

  this.onCreateGroupFormValueChange();
}


onCreateGroupFormValueChange(){
    this.createGroupForm.valueChanges.subscribe(value => {
      console.log(value);
      //emitting every time if any control value is changed
    });
}

---

我认为您应该使用Ngondestory生命周期钩子方法，然后在该方法中检查当前值是否与初始值不同，然后打开模式

@Component({ selector: 'my-cmp', template: `...` })
class MyComponent implements OnDestroy {
    public createGroupForm: FormGroup;
    public initalValues;

    ngOnInit() {
        this.createGroupForm = this._formBuilder.group({
            groupName: new FormControl("", [Validators.required]),
            groupPrivacy: new FormControl(null, [Validators.required]),
            groupTagline: new FormControl('')
        });
        this.initalValues = this.createGroupForm.value;
    }
    ngOnDestroy() {
        if (this.initalValues != this.createGroupForm.value) {
            //open modal
        }
    }
}

---

当您像这样退出页面时，可以使用

dirty

检查

if(this.createGroupForm.get('groupName').dirty || 
 this.createGroupForm.get('groupPrivacy').dirty || 
 this.createGroupForm.get('groupTagline').dirty) {
   // make an alert for unsaved changes
}

---

每次发出subscribe时，必须检查表单值和初始值 如果你想的话，可以随时使用hasChange

public createGroupForm : FormGroup;
hasChange: boolean = false;

ngOnInit() {
  this.createGroupForm = this._formBuilder.group({
      groupName: new FormControl("", [Validators.required]),
      groupPrivacy: new FormControl(null, [Validators.required]),
      groupTagline: new FormControl('')
  });

  this.onCreateGroupFormValueChange();
}


onCreateGroupFormValueChange(){
    const initialValue = this.createGroupForm.value
    this.createGroupForm.valueChanges.subscribe(value => {
      this.hasChange = Object.keys(initialValue).some(key => this.form.value[key] != 
                        initialValue[key])
    });
}

---

可以使用rxjs运算符检查值

 import { FormGroup, FormBuilder, Validators, FormControl, FormArray, NgForm } from '@angular/forms';  
import { pairwise, startWith } from 'rxjs/operators';

this.createGroupForm.valueChanges
      .pipe(startWith(''), pairwise())
      .subscribe(([prev, cur]) => {
        console.log('example 1 prev val', prev);
        console.log('example 1 cur val', cur);
        console.log('---');

        if (confirm('value will be changed')) {
          console.log('value changed')
        } else {
          console.log('value not changed')
        }

---

当值更改时，dirty变为true，因此它不会检查初始值的更改。您在if子句confirm（）中编写的函数是什么？请您解释一下。@RAHULKUNDU它显示了警报，您可以用两个按钮“确定”和“取消”设置消息，如“您有一些未保存的更改”。如果用户想要保存这些最新的更改，那么它将在第一个条件下进行。