Question

当用户提交且无效时，它可以在last_name上运行。如果被触摸并且无效，那么它将在复选框周围添加一个红色边框并将其摇晃。每次都可以使用。

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

但是如果是复选框，则仅在提交表单时才添加复选框周围的红色轮廓，选中该复选框时红色轮廓消失，但此后如果再次选中或取消选中该复选框将不起作用。 / p>

 <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的验证器。该验证人是通常用于必填复选框。

复选框验证仅可运行一次

1 个答案: