Question

我遇到一个问题，因为我有自定义验证，所以无法将：invalid CSS选择器与输入绑定。 invalid仅在基本的验证器示例中有效：输入type =“ email”，因此无效将与example @或example@example.exmaple一起使用，而我的函数仅验证最后一个（example@example.example）。 Project Link

HTML文件

<input class="custom-input" type="email" [(ngModel)]='Email' name="email" placeholder="Email" formControlName="emailTxt">
<div class="err>
   this is an error
</div>

TypeScript文件

this.signUpForm = this._fb.group({
   emailTxt: [null, Validators.compose([
     Validators.required
   ])]
 }, {
     validators: [
       EmailValidation('emailTxt'),
     ]
   });

表单验证功能

export function EmailValidation(controlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];

    if (control.errors && !control.errors.invalidEmail) {
      return;
    }
    if (control.value.trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
      control.setErrors({ invalidEmail: true });
    }
    else {
      control.setErrors(null);
    }
  }
}

CSS文件

.custom-input:invalid{
    & ~ .err {
      max-height: 200px;
      padding: 0 18px 10px 20px;
      color: red;
    }
}

我希望每一个control.setErrors（）函数都会触发无效的选择器

Answer 1

在您的项目中添加下面的CSS代码，这绝对是可行的

input.ng-dirty.ng-invalid {
  border: 1px solid red;
}

Answer 2

这肯定会起作用☺添加到ur css文件中

from typing import Callable

def payment_canceled(*args) -> Callable[Tuple[Any],HttpResponse]:
    return payment_failed

CSS无效选择器不适用于反应形式

2 个答案: