复选框验证仅可运行一次

时间:2019-02-07 07:16:40

标签: angular

当用户提交且无效时,它可以在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;
}

1 个答案:

答案 0 :(得分:0)

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