代码之家 › 专栏 › 技术社区 › tilly

角材料:尽管方法正确,但未显示mat错误

angular-reactive-forms angular-material angular

tilly · 技术社区 · 6 年前

我有一个要验证的确认密码formcontrol。

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

<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中的错误。

有人知道怎么解决这个问题吗?

@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, Validators.required),
            username: new FormControl(null, [Validators.required, Validators.minLength(5), Validators.maxLength(15)]),
            birthDate: new FormControl(null, Validators.required),
            password1: new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15), Validators.pattern('^.*(?=.{4,10})(?=.*\\d)(?=.*[a-zA-Z]).*$')]),
            password2: new FormControl(null, Validators.required),
            email: new FormControl(null, [Validators.required, Validators.email]),
            country: new FormControl(null, Validators.required),
            house: new FormControl(null, Validators.required)
        })
    }

    equalPasswords() {

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

}

2 回复 | 直到 6 年前

G. Tranter 6 年前

MatFormField 仅显示 mat-error 当 FormControl 有一个错误。它不会仅仅因为你告诉via就显示出来 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;
}

Simon_Weaver 6 年前

如果你把 [formGroup] 指令 <div> 那它就不会变了 submitted == true <form> 为了实现这一点)。

正在提交的表单是显示错误的两个触发器之一—另一个是已被触碰的字段。触摸的方式 onBlur 也就是说重点一定是 迷路的

所以你可以得到这种情况:

你有 [表格组] 坐在沙发上
你有一个类似用户名/密码的表单。
您还有一个提交按钮。
输入两个字段并按enter键。
您的验证会触发一个错误,但不会显示!为什么?
因为你从来没有 blur -编辑密码字段(例如,光标仍在该框中)
[表格组] 在 <表格>
另一个是创建自定义 ErrorStateMatcher

如果你路过 formGroup 对于“哑”子组件(没有自己的窗体),必须使用依赖项注入并传入 FormGroupDirective 而是在构造函数中。