Question

我有一个包含 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
    });
}

Answer 1

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

@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
        }
    }
}

Answer 2

每次发出订阅时，您都必须使用初始值检查表单值并在需要时使用 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])
    });
}

Answer 3

您可以像这样退出页面时使用 dirty 检查

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

Answer 4

您可以使用 rxjs 运算符来检查值。

(snip)
TASK [debug] ***************************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": {
        "IT-development": [
            {
                "firstname": "first02",
                "id": "ID02",
                "secondname": "surnam2"
            },
            {
                "firstname": "first03",
                "id": "ID03",
                "secondname": "surnam3"
            }
        ],
        "IT-operations": [
            {
                "firstname": "first04",
                "id": "ID04",
                "secondname": "surnam4"
            },
            {
                "firstname": "first05",
                "id": "ID05",
                "secondname": "surnam5"
            }
        ]
    }
}
(snip)

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

4 个答案: