角度材料：尽管有真正的方法,但是没有显示出来的错误

发布时间：2020-12-17 07:07:11 所属栏目：安全来源：网络整理

导读：我有一个确认密码formcontrol,我想验证. 当密码与确认密码输入中的值不同时,我想显示我的mat-error元素.为此,我有一个名为equalPasswords()的函数.如果函数是相同的,那么我们收到true,如果没有,我们收到false. mat-form-field input matInput placeholder="R

我有一个确认密码formcontrol,我想验证.

当密码与确认密码输入中的值不同时,我想显示我的mat-error元素.为此,我有一个名为equalPasswords()的函数.如果函数是相同的,那么我们收到true,如果没有,我们收到false.

<mat-form-field>
              <input matInput placeholder="Repeat password" [formControl]="password2" type="password">
              <mat-error *ngIf="password2.invalid && password2.hasError('required')">Password is required</mat-error>
              <mat-error *ngIf="!equalPasswords() && !password2.hasError('required')">Passwords need to match</mat-error>
</mat-form-field>

我检查了控制台,当我在密码框中输入两个不同的输入时,equalPasswords()返回false.但是它仍然没有显示DOM中的错误.

有人知道如何解决这个问题吗？

Signup.component.ts

@Component({
    selector: 'app-sign-up',templateUrl: 'sign-up.component.html',styleUrls: ['sign-up.component.css']
})

export class SignUpComponent implements OnInit {

    mySignupForm: FormGroup;
    countries = countries;
    uniqueUsernameMessage;
    uniqueEmailMessage;
    formSubmitted = false;
    @Output() closeSubmenu = new EventEmitter();
    @ViewChild('select') select;

    constructor(
        private authService: AuthenticationService,private route: Router,private navigationService: NavigationService){}

    get firstName() { return this.mySignupForm.get('firstName'); }
    get lastName() { return this.mySignupForm.get('lastName'); }
    get username() { return this.mySignupForm.get('username'); }
    get email() { return this.mySignupForm.get('email'); }
    get password1() { return this.mySignupForm.get('password1'); }
    get password2() { return this.mySignupForm.get('password2'); }
    get birthDate() { return this.mySignupForm.get('birthDate'); }
    get country() { return this.mySignupForm.get('country'); }
    get house() { return this.mySignupForm.get('house'); }

    ngOnInit() {
        this.mySignupForm = new FormGroup({
            firstName: new FormControl(null,Validators.required),lastName: new FormControl(null,username: new FormControl(null,[Validators.required,Validators.minLength(5),Validators.maxLength(15)]),birthDate: new FormControl(null,password1: new FormControl(null,Validators.minLength(6),Validators.maxLength(15),Validators.pattern('^.*(?=.{4,10})(?=.*d)(?=.*[a-zA-Z]).*$')]),password2: new FormControl(null,email: new FormControl(null,Validators.email]),country: new FormControl(null,house: new FormControl(null,Validators.required)
        })
    }

    equalPasswords() {

        console.log('equaltest',this.password1.value === this.password2.value);
        return this.password1.value === this.password2.value;
    }

}

解决方法

当FormControl出错时,MatFormField仅显示mat-error元素.它不会显示只是因为你通过ngIfElse告诉它 – 这只能在表单控件状态下工作.解决此问题的一种方法是创建自定义验证器并使用它来检查密码是否匹配.您还可以通过equalPasswords()函数在字段上设置错误.这应该是这样的：

equalPasswords(): boolean {

    const matched: boolean = this.password1.value === this.password2.value;

    console.log('equaltest',matched);

    if (matched) {
        this.signupForm.controls.password2.setErrors(null);
    } else {
        this.signupForm.controls.password2.setErrors({
           notMatched: true
        });
    }

    return matched;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!