Question

当我在验证验证器和异步验证器时尝试在DOM中显示错误时出现错误

我的错误：

错误TypeError：无法读取null的“必需”属性 Object.eval [作为updateDirectives]

在组件html中：

<div class="form-group">
            <label for="email">email</label>
            <input 
                type="text"
                id="email"
                formControlName="email"
                class="form-control">
            <div *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched ">
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').errors['required'] && signupForm.get('userData.email').touched">Email
                is required
              </span>
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').errors['email'] && signupForm.get('userData.email').touched">Email
                is not valid
              </span>
            </div>

在component.ts中：

ngOnInit() {
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
  }

注意：当我从表单控件异步验证器中删除异步验证器（this.forbiddenEmails）时，它起作用：

'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails)

（当我只有验证器而没有异步验证器时有效我没有收到任何错误，但我也想显示异步验证程序的错误。）

Answer 1

我通过使用“ hasError（'errorName'）”修复了此问题：

<div class="form-group">
            <label for="email">email</label>
            <input 
                type="text"
                id="email"
                formControlName="email"
                class="form-control">
            <div *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched ">
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').hasError('required') && signupForm.get('userData.email').touched">Email
                is required
              </span>
              <span class="help-block"
                *ngIf="signupForm.get('userData.email').hasError['email'] && signupForm.get('userData.email').touched">Email
                is not valid
              </span>

电子邮件无效的

Angular8反应形式验证器和异步验证器

1 个答案: