验证者 angular

Question

我试图在同一模式中为密码字段强制 Validators.required。如果是更新，则不会捕获 Validators.required 否则会报错。帮我！谢谢！

userForm() {
  const special = /^[A-Za-z0-9]+[A-Za-z0-9\-\_]*$/;
  this.UserForm = this.formBuilder.group({
    username: ['', [Validators.required, Validators.pattern(special)]],
    birthDate: ['', [Validators.required]],
    gender: [0, [Validators.required]],
    password: ['', [this.ifEditUser ? Validators.required : '', Validators.maxLength(64)]],
    fullName: ['', [Validators.required, Validators.maxLength(255)]],
    passwordRe: ['']
  },
  {
    validator: MustMatch('password', 'passwordRe')
  });

}

Answer 1

我猜代码 this.ifEditUser ? Validators.required : '' 不是很好的做法。

最好在 ngOnInit 或你的方法中使用 setValidators 方法来有条件地添加验证器。

代码看起来像

const passwordControl = this.UserForm.getControl('passowrd');
if (this.ifEditUser) {
  passwordControl.setValidators([Validators.required]);
}

如果 ifEditUser 按需更改，那么您还需要使用 passwordControl.updateValueAndValidity();

Answer 2

您需要删除 Validators.required 后的单个引号，如下所示

userForm() {
  this.UserForm = this.formBuilder.group({
    password: ['', [this.ifEditUser ? Validators.required : Validators.maxLength(64)]]
  });
}

要显示错误，请使用下面的代码

<small class="form-text text-danger" *ngIf="UserForm.controls.password.errors && !ifEditUser">
  Maximum 64 characters are allowed.
</small>

并添加以下带有提交按钮的行。当您的表单无效时，提交按钮将自动禁用。

<input [disabled]="!UserForm.valid" type="submit">

希望对您有所帮助。 :)

Answer 3

您可以使用自定义验证器，例如，下面的requiredIfValidator通用验证函数，它接受一个谓词并根据谓词值决定是否需要表单控件

requiredIfValidator(predicate) {
    return (formControl => {
      if (!formControl.parent) {
        return null;
      }
      if (predicate()) {
        return Validators.required(formControl);
      }
      return null;
    })
  }

以及表格：

 userForm = this.fb.group({
    id: [0],
    name: ['', [Validators.required, Validators.maxLength(128)]],
    password: ['', [this.requiredIfValidator(() => this.ifEditUser)]],
    passwordRe: ['']
  });

验证者 angular

Validators angular

angular

angular-custom-validators