角度材料：尽管有正确的方法，但垫子错误并未显示

Question

我有一个要验证的确认密码表单控件。

当密码与确认密码输入中的值不同时，我想显示我的 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, 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;
    }

}

Answer 1

当

MatFormField

 出现错误时，

mat-error

仅显示

FormControl

元素。它不会仅仅因为您通过

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;
}

Answer 2

我发现了可能发生这种情况的微妙情况。

如果您在

[formGroup]

之类的内容上添加 <div>

指令

，则提交表单时不会获得

submitted == true

（必须在

<form>

上才会发生这种情况）。

提交的表单是显示错误的两个触发器之一 - 另一个是字段被触摸。触摸意味着

onBlur

，这意味着焦点一定已经失去了。

所以你可以得到这样的情况：

• 您的 div 上有

  [formGroup]

• 您有类似用户名/密码表单的内容。

• 您还有一个提交按钮。

• 您输入这两个字段并按回车键。

• 您的验证触发了错误，但没有显示！为什么！

• 因为您从未

  blur

  编辑过密码字段（看看您的光标 - 它仍然在密码字段中，不是吗！）

• 最简单的解决方案是仅将

  [formGroup]

  添加到

  <form>

  标签

• 另一种是创建自定义

  ErrorStateMatcher

如果您通过 @Input 将

formGroup

传递给“哑”子组件（即传递给不管理自己表单的哑组件），则可以使用依赖注入并传入

FormGroupDirective

代替构造函数。

Answer 3

除了 G. Tranter 注释之外，要查看 mat-error 元素，还必须触摸表单字段。 你可以用线强制它

this.myForm.get('password2').markAsTouched();