FormGroup不会使用验证器对验证器作出反应

Question

我试图用一个自定义验证器将整个fromGroup设置为无效，这似乎不起作用。。。

下面代码的目标是比较FromGroup的两个实例。

• 如果它们匹配，则表示未进行任何更改，因此必须无效。
• 否则它不匹配，这意味着已经进行了更改，所以它必须是有效的

我的变量isValid在我记录时工作正常。它会根据变化变为真或假。

但是我无法使from无效，我已经尝试了很多方法，比如文章和堆栈溢出，这有一个stackblitz，但它似乎也不起作用。

像this.updateCyclistForm.set错误（{'无效'： true}）；from Angular 6只需要多个字段中的一个字段Reactive Form

我看过很多类似的帖子，其中一篇使用控件，但这里不是这样。

public updateCyclistForm: FormGroup
public savedStateOfForm: FormGroup

...

constructor(...) {
    ...
    this.savedStateOfForm = new FormGroup({
        status: new FormControl(this.currentReg.status, []),
        role: new FormControl(this.currentReg.role, []),
        passes: new FormControl({ data: this.passesUID }, [])
    })
    this.updateCyclistForm = new FormGroup({
        status: new FormControl(this.currentReg.status, []),
        role: new FormControl(this.currentReg.role, []),
        passes: new FormControl({ data: this.passesUID }, [])
    })
    this.updateCyclistForm.setValidators(this.isValid(this.savedStateOfForm));
}
    
...

isValid = (clone: FormGroup): ValidatorFn => {
    return (group: FormGroup): ValidationErrors => {
        let isValid = JSON.stringify(clone.value) != JSON.stringify(control.value)
        group.setErrors({ 'valid': isValid });
        this.updateCyclistForm.setErrors({ 'valid': isValid });
        return
    }
}

HTML

<button type="submit" [disabled]="!updateCyclistForm.valid">Save</button>

按钮从未被禁用，为什么？我做错了什么？

编辑：

我还尝试使用类似于@Adam的答案。这使得我的按钮被终身禁用。

  isValid = (clone: FormGroup): ValidatorFn => {
        return (group: FormGroup) : ValidationErrors => {
            return {
                invalid: JSON.stringify(clone.value) != JSON.stringify(group.value) ? true : null
              }
        }
    }




Answer 1

感谢@Adam的帮助

这就是解决方案

isValid = (clone: FormGroup) => {
    return (group: FormGroup) => {
        return JSON.stringify(clone.value) != JSON.stringify(group.value) ? null : { invalid: JSON.stringify(clone.value) != JSON.stringify(group.value) }
    }
}

Answer 2

setValidators必须接受返回ValidationErrors（或null）的ValidatorFn函数

constructor() {

   // ...

   this.updateCyclistForm.setValidators(this.updateCyclistValidator);
}


...

updateCyclistValidator(ctrl: FormGroup) {
   const valid = // run your validation uisng the values in ctrl

   // if there are no errors, you MUST return null
   if(valid) return null;

   // return your errors, for example:
   return {
     role: 'choose a role'
   }
    
}

验证器返回的错误的存在与否告诉angular您的表单是否有效。