在angular中使用响应式表单进行电子邮件验证

Question

我是新手，需要你的帮助。我正在尝试使用响应式表单onkeyup事件验证电子邮件。

registerform:any;
ngOnInit(): void {
this.registerform = new FormGroup({
"emailId": new FormControl(null,[Validators.required,Validators.email])
});
}
get emailid() { return this.registerform.get('emailId');}

<form [formGroup]="registerform" (ngSubmit) = "submitData()">
<input type="text" formControlName="emailId" placeholder="email">
<div *ngIf="emailid.invalid && (emailid.touched || emailid.dirty)">
<span class="myerror" name="err" *ngIf="emailid.errors?.required">*Email is required.</span>
<span class="myerror" name="err" *ngIf="emailid.errors?.email">*Email is not valid.</span>
</div>
</form>

Answer 1

比起使用from Validators，你可以创建一个angular指令

@Directive({
selector: '[appEmailValidator]',
providers: [
{ provide: NG_VALIDATORS, useExisting: EmailValidator, multi: true }
]
})
export class EmailValidator implements Validator {
validator: ValidatorFn;
constructor() {
this.validator = validateEmailFactory();
}
validate(c: FormControl) {
return this.validator(c);
}
}

// validation function
function validateEmailFactory(): ValidatorFn {
return (c: FormControl) => {
if (c.value) {
// tslint:disable-next-line:max-line-length
const isValidEmail = c.value.match(/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/);
const message = {
emailCheck: {
message: 'Email address is invalid'
}
};
return isValidEmail ? null : message;
}
};
}

现在在你的输入字段

中使用这个指令

<input type="text" id="lpd-email-input" formControlName="email"
class="form-control"
[placeholder]="Email address" autocomplete="none" appEmailValidator/>