FormGroup 不会对带有服装验证器的验证器做出反应答案

【问题标题】：FormGroup doesn't react to validator with costume validatorFormGroup 不会对带有服装验证器的验证器做出反应
【发布时间】：2021-08-13 12:28:54
【问题描述】：

我正在尝试使用自定义验证器将整个 fromGroup 设置为无效，这似乎不起作用...

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

如果匹配，则表示未进行任何更改，因此必须无效。
否则不匹配表示已进行更改，因此必须有效。

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

但我无法使 from 无效，我尝试了多种方式形成文章和堆栈溢出，其中有一个 stackblitz 似乎也不起作用。

喜欢this.updateCyclistForm.setErrors({ 'invalid': true}); 来自Angular 6 Required only one field from many fields Reactive Form

我看到很多类似的帖子都有 this one 使用控件，这里不是这种情况。

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 的答案。这使我的button 终身禁用。

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

【问题讨论】：

好的，所以你的按钮被禁用了，你非常接近。如果您的控件有效，您必须从您的验证器返回 null。您不能返回任何其他内容，所有内容都在文档中。
我以为我正在返回null，但它是一个空对象。感谢您的帮助

标签： javascript angularjs

【解决方案1】：

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 你的表单是否有效。

【讨论】：

我也尝试过类似的方法，但没有奏效。所以这让我觉得问题可能出在我的button 上。在您的回答中，您将如何使用 [disabled] 属性？
@crg - 我会像您使用它一样使用 disabled 。你用过类似的东西吗？还是您使用的正是我发布的内容？不要在updateCyclistValidator 中使用this。发布您尝试过的类似内容。
我使用了与您的代码类似的东西。您的代码与我期望的不符。但我试图从中得到启发。在我的函数isValid 中，我更改了return { invalid: JSON.stringify(clone.value) != JSON.stringify(group.value) ? true : null } 的返回值。
@crg - 您也没有正确使用setErrors。 setErrors({valid:true}) 仍然会导致表单无效。为什么你的按钮没有禁用我不知道。发布您的整个组件（和模板）。也许这个简单的例子会帮助你：stackblitz.com/edit/…

【解决方案2】：

感谢@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) }
    }
}

【讨论】：