复选框验证仅有效一次

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 的文档：

要求控件值为真的验证器。这个验证器是 常用于必填复选框。