我正在使用angular6文档进行表单验证，现在我确保所有表单验证都已填写，但现在
这是我的问题：
1。）如何验证密码和确认密码输入值不少于6个字符并且密码字段和确认密码字段必须匹配
2。）如何确保输入的电子邮件地址有效
<form #r="ngForm" name="theForm" (submit)="reg(r)">
<div class="form-group">
<label>Username</label>
<input type="text"
class="form-control"
name="username"
[(ngModel)]="register.username"
#registerUsername="ngModel"
required
pattern="^[a-zA-Z]+$">
<span class="help-block danger" *ngIf="registerUsername.errors?.required && registerUsername.touched">
The username is required
</span>
<span class="help-block danger" *ngIf="registerUsername.errors?.pattern && registerUsername.touched">
The username can only contain the letters a-z or A-Z
</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password"
class="form-control"
name="password"
required
[(ngModel)]="register.password"
#registerPassword="ngModel">
<span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
password is required
</span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password"
class="form-control"
name="password"
required
[(ngModel)]="register.password"
#registerPassword="ngModel">
<span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
Re-enter password is required
</span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email"
class="form-control"
name="email"
required
[(ngModel)]="register.email"
#registerEmail="ngModel">
<span class="help-block danger" *ngIf="registerEmail.errors?.required && registerEmail.touched">
Email is required
</span>
</div>
答案 0 :(得分：0)
这是我能够解决的方法，以防它可能对某人有所帮助。
<div class="form-group">
<label>Password</label>
<input type="password"
class="form-control"
name="password"
required minlength="6"
[(ngModel)]="register.password"
#registerPassword="ngModel">
<span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
The password is required
</span>
<span *ngIf="registerPassword.errors?.minlength && registerPassword.touched">
Password must be at least 6 characters or longer.
</span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password"
class="form-control"
name="repassword"
required minlength="6" pattern={{register.password}}
[(ngModel)]="register.repassword"
#registerRePassword="ngModel">
<span class="help-block danger" *ngIf="registerRePassword.errors?.required && registerRePassword.touched">
Confirm password is required
</span>
<span *ngIf="registerRePassword.errors?.minlength && registerRePassword.touched">
Password must be at least 6 characters or longer.
</span>
<span *ngIf="registerRePassword.errors?.pattern && registerRePassword.touched">
Passwords must match.
</span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email"
class="form-control"
name="email"
required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
[(ngModel)]="register.email"
#registerEmail="ngModel" email>
<span class="help-block danger" *ngIf="registerEmail.errors?.required && registerEmail.touched">
Email is required
</span>
<span *ngIf="registerEmail.errors?.pattern && registerEmail.touched">
Valid Email is required
</span>
</div>
答案 1 :(得分：0)
我试图实现您所说的要求，下面是链接：
https://stackblitz.com/edit/angular-formvalidation-wins999-z1sxcw
我已经使用内置的验证器来最小化长度并验证电子邮件
以及用于密码和确认密码匹配的自定义验证器。
这些链接非常有用：
https://angular.io/guide/forms-overview
我希望对您有帮助
答案 2 :(得分：0)
尝试以斜角使用反应形式，在我看来，它更具可读性和灵活性。您可以从here开始。您的表单将如下所示：
<div [formGroup]="myForm" #form>
<label>Username</label>
<input formControlName="username" type="text">
<label>Password</label>
<input formControlName="password" type="password">
<label>Confirm Password</label>
<input formControlName="confirmPassword" type="password">
<label>Email</label>
<input formControlName="email" type="text">
<button (click)="submit()" [disabled]="form.invalid">Submit</button>
</div>
而不是像这样使用FormBuilder在.ts文件中构建表单：
myForm: FormGroup;
constructor(private builder: FormBuilder) {
this.myForm = builder.group( {
username: [null, Validators.required],
password: [null, [Validators.required, Validators.minLength(6)]],
confirmPassword: [null, Validators.required],
email: [null, [Validators.required, Validators.email]]
}, {validator: PasswordValidator.matchPassword});
}
要验证长度，电子邮件和更多内容，您可以使用built-in validators，但是对于密码匹配，您应该编写一些代码。我将其写在单独的文件PasswordValidator.ts中。看起来像：
export class PasswordValidator {
static matchPassword(control: AbstractControl) {
const password = control.get('password').value;
const confirmPassword = control.get('confirmPassword').value;
if (password !== confirmPassword) {
control.get('confirmPassword').setErrors({matchPasswords: true});
}
return null;
}
}
答案 3 :(得分：0)
请检查以下内容。
HTML。
<mat-form-field class="full-width-input">
<input matInput type="password" formControlName="newpassword" placeholder="Enter new password"
[type]="hide1 ? 'password' : 'text'" required minlength="4" maxlength="25"
text="test" #newpassword>
<mat-icon matSuffix class="pointer-style" (click)="hide1 = !hide1" >
{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
<mat-error *ngIf="form.controls['newpassword'].hasError('required')">
New Password is <strong>required</strong>
</mat-error>
<mat-error *ngIf="form.controls['newpassword'].hasError('minlength')">
Your password must be at least <strong>4 characters. </strong>
</mat-error>
</mat-form-field>
<mat-form-field class="full-width-input">
<input matInput type="password" placeholder="Confirm password" formControlName="conformpassword" [errorStateMatcher]="matcher"
[type]="hide2 ? 'password' : 'text'" text="test" #conformpassword>
<mat-icon matSuffix class="pointer-style" (click)="hide2 = !hide2">
{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
<mat-error *ngIf="form.hasError('notSame')">
Passwords does not match
</mat-error>
</mat-form-field>
<div class="full-width-input">
</div>
<button style="margin-left: 75px;" mat-raised-button [disabled]="!form.valid" color="primary">SUBMIT</button>
</form>
在组件中：
从'@ angular / material'导入{ErrorStateMatcher};
export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const invalidCtrl = !!(control && control.invalid && control.parent.dirty); const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty); return (invalidCtrl || invalidParent); } } @Component({ selector: 'app-changepassword', templateUrl: './changepassword.component.html', styleUrls: ['./changepassword.component.scss'] }) export class ChangepasswordComponent implements OnInit { form: FormGroup; error = ''; formSubmitAttempt: boolean; oldPassword: FormControl; newpassword: FormControl; conformpassword: FormControl; hide: boolean; hide1: boolean; hide2: boolean; matcher = new MyErrorStateMatcher(); constructor(private fb: FormBuilder) { this.form = this.fb.group({ oldPassword: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(25)])], newpassword: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(25)])], conformpassword: [''] }, {validator: this.checkPasswords }); dialogRef.disableClose = true; } checkPasswords(group: FormGroup) { // here we have the 'passwords' group let pass = group.controls.newpassword.value; let confirmPass = group.controls.conformpassword.value; return pass === confirmPass ? null : { notSame: true } } ngOnInit() { this.hide = true; this.hide1 = true; this.hide2 = true; } }