Валидаторы 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

Вам необходимо удалить одну инвертированную запятую после 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>

, а также добавьте следующую строку с submit кнопка. Кнопка отправки будет автоматически отключена, если ваша форма недействительна.

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

Надеюсь, она вам пригодится. :)

Answer 2

Вы можете использовать пользовательский валидатор, например, следующую requiredIfValidator generi c функцию проверки, которая принимает предикат и на основе значения предиката делает контроль формы обязательным или нет

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

Answer 3

Полагаю, код this.ifEditUser ? Validators.required : '' не является хорошей практикой.

Лучше использовать метод setValidators внутри ngOnInit или внутри вашего метода для условного добавления валидатора.

Код будет выглядеть так:

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

Если ifEditUser изменяется по требованию, вам также нужно использовать passwordControl.updateValueAndValidity();