使用FormGroup、FormBuilder和Validator时,是否可以更改angular11表单验证相关状态

使用FormGroup、FormBuilder和Validator时,是否可以更改angular11表单验证相关状态,angular,angular11,Angular,Angular11,错误:无法分配给“状态”,因为它是只读属性。ts(2540)您有几个可用选项 如果表单有错误,则该表单无效,因此您可以简单地使用setErrors()更新表单 另一个选项是简单地使用自定义验证器 实现这一点的最佳方法是创建一个自定义验证器,并在FormGroup({})本身而不是密码的FormControl()上使用它 此验证程序指令类将两个FormControl()s作为输入,并检查它们的值是否匹配。因此,验证器的级别必须高于它正在验证的两个FormControl()s 我希望这是很好的信息

错误:无法分配给“状态”,因为它是只读属性。ts(2540)

您有几个可用选项

  • 如果表单有错误,则该表单无效,因此您可以简单地使用
    setErrors()
    更新表单
  • 另一个选项是简单地使用自定义验证器

  • 实现这一点的最佳方法是创建一个自定义验证器,并在
    FormGroup({})
    本身而不是密码的
    FormControl()
    上使用它

    此验证程序
    指令
    类将两个
    FormControl()
    s作为输入,并检查它们的值是否匹配。因此,验证器的级别必须高于它正在验证的两个
    FormControl()
    s

    我希望这是很好的信息和帮助您的情况


    我建议您创建一个自定义验证器,用于比较
    valOfPass
    valOfRePass
    @N.F。请将您的答案/工作代码与自定义验证器一起发布。我会选择自定义验证器。仅删除错误意味着,您可能添加的所有其他类型的验证错误(如最小长度)也将被删除。@JanRecker不完全正确。如果您检查,我已在
    addForm
    上应用了验证程序。所以只有FormGroup受到影响。子窗体组不受影响,您可以检查更新的演示。我增加了一个最小长度3@OwenKelvin它正在工作,您能描述一下函数名“valOfPass()”之前的“get”是什么吗?
    get
    这里被用作获取属性“valOfPass”的
    getter
    。这是我的方法,使演示工作,但在你的情况下,你可能已经使用了不同的方法。另外,我认为你可能需要看一些文章来理解“getter和setter”的概念,例如这里谢谢你的回答。亲爱的@MuhammadBilal先生,我编辑了我的答案,并在[stackblitz.com]上添加了一个代码示例。我希望这能满足你的询问。我祝你一切顺利
    onblurRePass(event:any){
        this.valOfRePass = this.empProperties.repassword;
        console.log("Pass Val: "+this.valOfPass + " RePass Val: "+this.valOfRePass);
    
        if(this.valOfPass == this.valOfRePass){
          this.matchPassword = 'matched';
          this.addForm.status = 'VALID'; // need to change this status
        }
        else{
          this.matchPassword = 'unmatched';
          this.addForm.status = 'INVALID';  //need to change this status
        }
      }
    
      onblurRePass() {
        this.valOfRePass = this.empProperties.repassword;
        console.log(
          'Pass Val: ' + this.valOfPass + ' RePass Val: ' + this.valOfRePass
        );
    
        if (this.valOfPass == this.valOfRePass) {
          this.matchPassword = 'matched';
          this.addForm.setErrors(null)
        } else {
          this.matchPassword = 'unmatched';
           this.addForm.setErrors({'mismatched': true})
        }
      }