Question

我是一名正在学习 Angular 6 的学生，并且目前遇到无法解决的问题。

我的代码的目的是“简单”，它是确认注册表格的密码。

我的表单运行正常，所有输入均用.ts表示。

但是，我用于确认密码的自定义验证程序不起作用。

我的服务应将null返回给我的验证器，但这不会发生。密码相同，但是按钮重置无效，“ confirm_password”输入也保持无效！

经过多次尝试，我找不到错误的出处或解决方法。

有人可以帮助我理解我的错误吗？

我先谢谢你，这是代码：

我的HTML：

<div class="inscriptionContainer">
<section class='inscritFormContent'>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm.value)" >
  <mat-form-field>
   <input 
    type="text" 
    matInput 
    placeholder="user" 
    [formControl]="loginForm.controls.user" >
    <mat-error *ngIf="loginForm.controls.user.invalid">{{getErrorMessage('user')}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input 
   type="text" 
   matInput 
   placeholder="email" 
   [formControl]="loginForm.controls.email">
    <mat-error *ngIf="loginForm.controls.email.invalid">{{getErrorMessage('email')}}</mat-error>
  </mat-form-field>

  <mat-form-field>
   <input 
   type="password" 
   matInput 
   placeholder="password" 
   [formControl]="loginForm.controls.password">
  <mat-error *ngIf="loginForm.controls.password.invalid">{{getErrorMessage('password')}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input 
    type="password" 
    matInput 
    placeholder="confirm_password" 
    [formControl]="loginForm.controls.confirm_password">
   <mat-error *ngIf="loginForm.controls.confirm_password.invalid">{{getErrorMessage('confirm_password')}}</mat-error>
   </mat-form-field>

  <button  mat-raised-button color="primary" [disabled]="!loginForm.valid">Submit</button>
</form>

我的.ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { PasswordValidator } from './password.validator';

@Component({
selector: 'app-inscription',
templateUrl: './inscription.component.html',
styleUrls: ['./inscription.component.scss']
})

export class InscriptionComponent implements OnInit {
loginForm : FormGroup; 
constructor() {}

ngOnInit() {
this.loginForm = new FormGroup({
  user: new FormControl(null, [Validators.required]),
  email: new FormControl(null, [Validators.required, Validators.email]),
  password: new FormControl('', Validators.compose([
     Validators.minLength(6),
     Validators.required,
  ])),
  confirm_password: new FormControl('', Validators.required)
}, (formGroup: FormGroup) => {
   return PasswordValidator.areEqual(formGroup);
});
}


onSubmit(objValue) { 
console.log(this.loginForm.valid);
console.log('objValue',objValue);
}
getErrorMessage(formControlName : string): string {
const errors : any= {
  required : "Required Information",
  minlength: "The password need at least 6 characters",
  email : "The mail is not valid",
  areEqual:"The passwords are not the same"
}
return Object.keys(this.loginForm.controls[formControlName].errors).reduce(
  (prev, current, currentIndex) => {

    return `${errors[current]}`;
  },''
)

}

}

我的服务：

import { FormControl, FormGroup, NgForm, FormGroupDirective } from '@angular/forms';

export class PasswordValidator {
static areEqual(formGroup: FormGroup) {
let password;
let passwordconfirmation;
let valid = true;

for (let key in formGroup.controls) {
    if(key === password && password !== undefined){
    password = formGroup.controls[key].value 
    }

    if(key === confirm_password && confirm_password !== undefined){
    passwordconfirm = formGroup.controls[key].value
    }
    }


      if (password !== confirmpassword) {
        valid = false;
      }

if (valid) {
  return null;
}

return {
  areEqual: true
};
}
}

密码匹配的自定义验证器

0 个答案: