角2群验证

Question

所提供的简单登记表：

this.registerForm = this.formBuilder.group({
    email:['', Validators.compose([
    Validators.required,
    Validators.pattern('.+@.+\..+'),
    ]), this.validators.isTaken],
    matchingPassword: this.formBuilder.group({
    password: ['', Validators.compose([
            Validators.required,
            Validators.maxLength(30),
            Validators.minLength(8)
        ])],
    passwordConfirmation: ['', Validators.compose([
            Validators.required,
        ])]
    }, {validator: this.validators.match})
})

我试图验证密码确认匹配，所以我正在应用匹配验证器形成组。但是现在我面临这样一种情况:字段本身显示为有效(使用绿色边框，因为所有验证器都在传递)，但组验证器不是，我需要将它们显示为红色。

​

​

那么，我应该手动将ng-有效更改为ng-无效，还是有一些更好的方法来解决这个问题？

Answer 1

我刚才在这里回答了这个问题。

基本角度并不假设您想要使一个组的所有字段无效，因为这个组是无效的。您可以在模板本身中补充该信息。

我没有您的模板，但我可以或多或少地假设您可以通过以下方式更改控件以使其失效：

<input [ngClass]="{'ng-invalid': registerForm.get('matchingPassword').hasError('nomatch')}" type="text" placeholder="Password" formControlName="password">

<input [ngClass]="{'ng-invalid': registerForm.get('matchingPassword').hasError('nomatch')}" type="text" placeholder="Confirm password" formControlName="passwordConfirmation">

您可能需要调整自定义验证器match返回的占位符和错误名称。

1