Angular在创建
请帮助我验证输入的电子邮件，以便输入框接受所有特殊字符。这是电子邮件ID:sokołowski@pstyz.pl.stg我们需要验证此电子邮件ID。
ts文件：
this.fromEmail = this.fb.control('', [
Validators.required,
Validators.email,
]);
我需要regex进行验证。
FormControl时附带了内置的验证器。
public email_id = new FormControl('', Validators.email);
这应该接受你上面的例子作为一封有效的电子邮件。我建议阅读FormControl和验证事件。
https://angular.io/guide/form-validation
这里我提供了一个以angular进行电子邮件验证的示例代码，供您参考
Html:
<form [formGroup]="service.formModel" autocomplete="off" (submit)="onSubmit()">
<div class="form-group required">
<label>Username</label>
<input class="form-control" formControlName="UserName">
<label class="text-danger" *ngIf="service.formModel.get('UserName').touched && service.formModel.get('UserName').errors?.required">This field is mandatory.</label>
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" formControlName="Email">
<label class="text-danger" *ngIf="service.formModel.get('Email').touched && service.formModel.get('Email').errors?.email">Invalid email address.</label>
</div>
<div formGroupName="Passwords">
<div class="form-group required">
<label>Password</label>
<input type="password" class="form-control" formControlName="Password">
<label class="text-danger" *ngIf="service.formModel.get('Passwords.Password').touched && service.formModel.get('Passwords.Password').errors?.required">This field is mandatory.</label>
<label class="text-danger" *ngIf="service.formModel.get('Passwords.Password').touched && service.formModel.get('Passwords.Password').errors?.minlength">Minimum 4 characters required.</label>
</div>
<div class="form-group required">
<label>Confirm Password</label>
<input type="password" class="form-control" formControlName="ConfirmPassword">
<label class="text-danger" *ngIf="service.formModel.get('Passwords.ConfirmPassword').touched && service.formModel.get('Passwords.ConfirmPassword').errors?.required">This field is mandatory.</label>
<label class="text-danger" *ngIf="service.formModel.get('Passwords.ConfirmPassword').touched && service.formModel.get('Passwords.ConfirmPassword').errors?.passwordMismatch">Confirm Password does not match.</label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8 offset-md-2">
<button type="submit" class="btn btn-lg btn-block" [disabled]="!service.formModel.valid">Sign Up</button>
</div>
</div>
</form>
TS:
import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { UserService } from 'src/app/shared/user.service';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
constructor(public service: UserService,private toastr: ToastrService) { }
ngOnInit(): void {
this.service.formModel.reset();
}
onSubmit()
{
this.service.register().subscribe
(
(res: any) =>
{
console.log(res);
this.service.formModel.reset();
this.toastr.success('New user created!', 'Registration successful.');
},
err => {
if (err.status == 400)
this.toastr.error('Username is already Exist', 'Registeration Failed.');
else
console.log(err);
}
);
}
}