验证器棱角分明

Question

我正试图以相同的模式强制验证密码字段所需的Validators。如果它是一个更新，它将不会捕获Validators.requid，否则它将得到一个错误。帮帮我！谢谢！

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

您需要删除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 2

我想代码this.ifEditUser ? Validators.required : ''不是一个好的实践。

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

代码看起来像

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

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

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: ['']
});