复选框验证仅有效一次

Question

当用户提交并且无效时，它适用于last_name。如果触摸且无效，则会在复选框周围添加红色边框并摇晃它。它每次都有效。

例如，如果用户在last_name中输入某个值，然后红色边框消失，如果他删除所有内容，则红色边框再次出现。

但是在复选框的情况下，复选框周围的红色轮廓仅在提交表单时添加，选中该框时红色轮廓消失，但之后如果再次选中或取消选中该框，则它不起作用。

 <input [ngClass]="{'animated shake red-border-err': registerForm.get('last_name').invalid && registerForm.get('last_name').touched || registerForm.get('last_name').invalid && registerForm.get('last_name').invalid && submitted }" type="text" formControlName="last_name" name="last_name" placeholder="Last Name *"/>
 <div [ngClass]="{'animated shake check-box-border-err': registerForm.get('terms').invalid && registerForm.get('terms').touched || registerForm.get('terms').invalid && registerForm.get('terms').invalid && submitted }">
    <input formControlName="terms" name="terms" type="checkbox" value="">I agree <a href="">Terms and conditions</a>
 </div>

TS 文件

this.registerForm = this.formBuilder.group({
   last_name:['', Validators.required],
   terms: ['', Validators.required],
})

.css

.check-box-border-err input[type=checkbox] {
    outline: 1px solid red;
}

Answer 1

您可以使用

ValidatorPattern来检查正确的值，即true。尝试这样做：

this.registerForm = this.formBuilder.group({
   last_name:['', Validators.required],
   terms: [false, Validators.pattern('true')],
});

编辑：

更好的方法是使用 Validators.requiredTrue 而不是 Validators.pattern('true') ，这应该用于所需的复选框：

this.registerForm = this.formBuilder.group({
   last_name:['', Validators.required],
   terms: [false, Validators.requiredTrue],
});

来自 Angular 的文档：

要求控件的值为 true 的验证程序。这个验证器是 通常用于所需的复选框。