Angular 自定义验证器无法以响应形式正常工作

Angular新手，正在尝试添加自定义电子邮件验证程序，该验证程序将转到我的服务器并检查电子邮件地址是否已在使用中

但似乎无法在窗体上显示错误消息。 下面是我在尝试攻击服务器之前如何测试它

仅供参考-调用了“emailMatchValidator（）”，但我无法让它在表单上显示任何类型的错误消息

也许我应该试试别的。感动

ngOnInit（）{
这是.createRegisterPerform（）；
}
createRegisterPerform（）{
this.registerForm=this.fb.group({
性别：[“男性”]，
电子邮件：[''，[Validators.required，Validators.email]]，
用户名：[''，[Validators.required，Validators.minLength（4），Validators.maxLength（10）]，
知识：[''，验证器。必需]，
dateOfBirth:[null，Validators.required]，
城市：[''，验证器。必填]，
国家：[''，验证器。必填]，
密码：[''，[Validators.required，Validators.minLength（4），Validators.maxLength（8）]，
确认密码：[''，验证器。必需]
}, {
验证程序：[this.passwordMatchValidator，this.emailMatchValidator]
});
}
emailMatchValidator（g:FormGroup）{
返回g.get（'email'）。值！='emailaddress@gmail.com“？空：{
电子邮件存在：正确
};
}

电子邮件是必需的
无效的电子邮件地址
电子邮件地址已在使用中

进行了一些更改：

• 您已将验证应用于完整表单，我仅将其更改为电子邮件字段

  电子邮件：[''[Validators.required，Validators.email，this.emailMatchValidator]]，

• 将“电子邮件”字段值和“电子邮件”字段状态添加到屏幕，以查看正在进行的验证

• 在“电子邮件”字段中输入任何内容，并移动焦点以使验证生效

相关的HTML：

    <form class="form-group" [formGroup]='registerForm'>
        <input type="email" 
                        [ngClass]="{'is-invalid': registerForm.get('email').errors && registerForm.get('email').touched}
                          || registerForm.get('email').touched && registerForm.hasError('emailExists')"
                        class="form-control" 
                        formControlName="email" 
                        placeholder="Email">
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('required')">
                          Email is required
                        </div>
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('email')">
                          Invalid email address
                        </div>
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('emailExists')">
                            Email address already in use
                          </div>
                    </form>

<hr/>
                    <b>email value:</b> {{registerForm.controls.email.value}} <br/>
                    <b>email status:</b> {{registerForm.controls.email.status}}

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup, AbstractControl } from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  constructor(private fb: FormBuilder) { }
  registerForm;

  ngOnInit() {
    this.createRegisterForm();
    console.log(this.registerForm);
  }

  createRegisterForm() {
    this.registerForm = this.fb.group({
      gender: ['male'],
      email: ['', [Validators.required, Validators.email, this.emailMatchValidator]],
      username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
      knownAs: ['', Validators.required],
      dateOfBirth: [null, Validators.required],
      city: ['', Validators.required],
      country: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(8)]],
      confirmPassword: ['', Validators.required]
    }
      /*, {
          validator: [this.passwordMatchValidator, this.emailMatchValidator]
        }
        */
    );
  }

  passwordMatchValidator() {
    /* some implementation */
  }

  emailMatchValidator(control: AbstractControl) {
    if (control.value !== 'emailaddress@gmail.com') {
      return false;
    } else {
      return { emailExists: true };
    }
  }

}

工作

做了一些改变：

• 您已将验证应用于完整表单，我仅将其更改为电子邮件字段

  电子邮件：[''[Validators.required，Validators.email，this.emailMatchValidator]]，

• 将“电子邮件”字段值和“电子邮件”字段状态添加到屏幕，以查看正在进行的验证

• 在“电子邮件”字段中输入任何内容，并移动焦点以使验证生效

相关的HTML：

    <form class="form-group" [formGroup]='registerForm'>
        <input type="email" 
                        [ngClass]="{'is-invalid': registerForm.get('email').errors && registerForm.get('email').touched}
                          || registerForm.get('email').touched && registerForm.hasError('emailExists')"
                        class="form-control" 
                        formControlName="email" 
                        placeholder="Email">
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('required')">
                          Email is required
                        </div>
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('email')">
                          Invalid email address
                        </div>
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('emailExists')">
                            Email address already in use
                          </div>
                    </form>

<hr/>
                    <b>email value:</b> {{registerForm.controls.email.value}} <br/>
                    <b>email status:</b> {{registerForm.controls.email.status}}

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup, AbstractControl } from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  constructor(private fb: FormBuilder) { }
  registerForm;

  ngOnInit() {
    this.createRegisterForm();
    console.log(this.registerForm);
  }

  createRegisterForm() {
    this.registerForm = this.fb.group({
      gender: ['male'],
      email: ['', [Validators.required, Validators.email, this.emailMatchValidator]],
      username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
      knownAs: ['', Validators.required],
      dateOfBirth: [null, Validators.required],
      city: ['', Validators.required],
      country: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(8)]],
      confirmPassword: ['', Validators.required]
    }
      /*, {
          validator: [this.passwordMatchValidator, this.emailMatchValidator]
        }
        */
    );
  }

  passwordMatchValidator() {
    /* some implementation */
  }

  emailMatchValidator(control: AbstractControl) {
    if (control.value !== 'emailaddress@gmail.com') {
      return false;
    } else {
      return { emailExists: true };
    }
  }

}

---

正在工作

谢谢您的帮助！快速提问-由于这个项目不是我的，我还在学习，为什么开发人员在完整的表单上使用“validator:this.passwordMatchValidator”？是因为他试图验证多个控件（密码、确认密码）的访问吗？答案是：是，谢谢帮助！快速提问-由于这个项目不是我的，我还在学习，为什么开发人员在完整的表单上使用“validator:this.passwordMatchValidator”？是因为他试图验证跨多个控件（密码、确认密码）的访问吗？答案是：是