Question

帮助请理解。我正在尝试为反应形式编写自定义验证器。

成分：

private form: FormGroup;

  ngOnInit() {
    const this_ = this;

    this.form = new FormGroup({
      'email':      new FormControl(null, [Validators.required, Validators.email]),
      'password':   new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'password2':  new FormControl(null, [Validators.required, Validators.minLength(6), this_.comparePasswords]),
      'name':       new FormControl(null, [Validators.required]),
      'agree':      new FormControl(false, [Validators.requiredTrue])
    });
  }

  comparePasswords(c: FormControl) {
    console.log(c);

    const hashStr = Md5.hashStr(c.value.password);
    const hashStr2 = Md5.hashStr(c.value.password2);

    console.log(hashStr, hashStr2);

    return (hashStr === hashStr2) ? null : {
      comparePasswords: {
        valid: false
      }
    };
  }

您需要连接的所有导入。加载页面后，浏览器控制台会立即显示表单对象，其中值对象为空。

我无法检查函数comparePasswords（）。

控制台显示如下：

ERROR TypeError：无法读取null
的属性'password'

LIVE EXAMPLE HERE

Answer 1

将null更改为""

this.form = new FormGroup({
  'email':      new FormControl("", [Validators.required, Validators.email]),
  'password':   new FormControl("", [Validators.required, Validators.minLength(6)]),
  'password2':  new FormControl("", [Validators.required, Validators.minLength(6), this_.comparePasswords]),
  'name':       new FormControl("", [Validators.required]),
  'agree':      new FormControl(false, [Validators.requiredTrue])
});

Answer 2

除了将初始值设为null之外，您还要在formcontrol上设置自定义验证器，因此您在自定义验证器中实际获得的只是formcontrol password2，不是整个表单组。

因此，我将自定义验证器放在formgroup级别，或者更好的是，为密码创建一个嵌套的formgroup并为其应用验证器。为什么？因为如果您在整个表单上应用验证器，只要任何更改形成，就会触发它。但是在这个示例中，我将它应用于整个表单以及缩小您的代码。在表单组级别（嵌套或不嵌套）上应用自定义验证器的优点还在于检查输入。由于验证器位于您的问题中，因此只有在password2字段发生更改时，password才会检查password2是否匹配password。那么，如果您在修改password2后修改constructor(private fb: FormBuilder) { } ngOnInit() { this.form = this.fb.group({ password: ['', [Validators.required, Validators.minLength(6)]], password2: ['', [Validators.required, Validators.minLength(6)]], },{validator: this.comparePasswords}); }字段，则不会显示错误，并且表单被视为有效会发生什么。

所以建立形式：

comparePasswords(c: FormGroup) {
  const hashStr = Md5.hashStr(c.controls.password.value);
  const hashStr2 = Md5.hashStr(c.controls.password2.value);
  return (hashStr === hashStr2) ? null : { notSame: true };
}

然后您的自定义验证器将如下所示：

c.controls.password.value

您可以仅比较c.controls.password2.value和Md5，但由于您使用的是notSame，我只是在这里使用了这些值。另请注意，如果密码不匹配，我们只是发送一个包含您选择的自定义错误的对象，<div *ngIf="form.hasError('notSame')">Passwords do not match!</div>。

要显示您可以执行的错误消息：

m_html = "<span><img src=\\\"/images/icon/pichere.png\\\" alt=\"image description\"> </span>";

您修改后的 StackBlitz

为什么表单值对象为空？

2 个答案: