0

我正在尝试对同一模式中的密码字段强制使用 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')
  });

}

4

3 回答 3

0

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">

我希望它对你有帮助。:)

于 2020-04-27T03:36:18.290 回答
0

您可以使用自定义验证器，例如，以下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: ['']
  });
于 2020-04-27T04:02:29.740 回答
0

我猜代码this.ifEditUser ? Validators.required : ''不是好习惯。

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

代码看起来像

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

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

于 2020-04-27T03:08:02.643 回答