如果未选中复选框，则设置复选框验证答案

【问题标题】：Set checkbox validation if checkbox unchecked如果未选中复选框，则设置复选框验证
【发布时间】：2019-08-19 01:21:39
【问题描述】：

在我的 Angular 6 应用程序的注册表单中，我有一个已选中的复选框。我需要检查用户是否取消选中该复选框，如果是，我想显示一条错误消息。

这是我在 .html 文件中的复选框，

 <div class="form-group">
       <div class="round">
            <input
                  type="checkbox"
                  id="checkbox33"
                  formControlName="agree">
             <label for="checkbox33"></label>
        </div>
        <small class="text-muted">Agree to our <a href="#" class="link">Terms
                  Of Use</a> and <a href="#" class="link">Privacy Policy</a>.
                </small>
        <span *ngIf="!worldWideRegisterForm.get('agree').valid" class="text-danger">You should agree!</span>

  </div>

这是我在 .ts 文件中的 ngOnInit()

ngOnInit() {
    this.worldWideRegisterForm = new FormGroup({
      'userName': new FormGroup({
        firstName: new FormControl(null, Validators.required),
        lastName: new FormControl(null, Validators.required)
      }),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'phone': new FormControl(null, Validators.required),
      'address': new FormGroup({
        line1: new FormControl(null, Validators.required),
        line2: new FormControl(null),
      }),
      'area': new FormGroup({
        'province': new FormControl(null, Validators.required),
        'city': new FormControl(null, Validators.required),
        'postalCode': new FormControl(null, Validators.required),
      }),
      'password': new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'agree': new FormControl(true, Validators.required)
    });
  }

【问题讨论】：

如果用户无法取消选中该框，您为什么不直接禁用它？
谢谢@trichetriche，你是对的。但是根据要求，我不能禁用它。

标签： angular validation checkbox angular6

【解决方案1】：

我可以通过为复选框编写自定义验证来解决我的问题，并获得与其他答案一样的准确输出。我也喜欢分享我的答案。

这是我的复选框的 .html，

<div class="form-group">
        <div class="round">
             <input
                  type="checkbox"
                  id="checkbox33"
                  formControlName="agree">
             <label for="checkbox33"></label>
         </div>
         <small class="text-muted">Agree to our <a href="#" class="link">Terms
                Of Use</a> and <a href="#" class="link">Privacy Policy</a>.
              </small>
         <span *ngIf="!worldWideRegisterForm.get('agree').valid" class="text-danger">
           <span *ngIf="worldWideRegisterForm.get('agree').errors['checkBoxIsForbidden']">Agree to our terms & conditions.</span>
              </span>
  </div>

这是我添加到我的 .ts 文件中的内容

'agree': new FormControl(true, [Validators.required, this.forbiddenCheckBox])

//fuction to check the checkbox
 forbiddenCheckBox(control: FormControl): { [s: string]: boolean } {
    if (control.value === false) {
      return {'checkBoxIsForbidden': true};
    }
  }

【讨论】：

【解决方案2】：

使用角度验证器requiredTrue

'agree': new FormControl(true, Validators.requiredTrue)

对于错误

<div *ngIf="myTrue.hasError('required')">
   Agree the T&C    
</div>

官方链接https://angular.io/api/forms/Validators#requiredTrue

【讨论】：

非常感谢@Sheik，看来有很多方法可以解决我的问题。也感谢您分享文档参考。

【解决方案3】：

而不是'agree': new FormControl(true, Validators.required) 试试'agree': new FormControl(true, Validators.pattern('true'))。

【讨论】：

谢谢@riorudo，我可以通过编写自定义验证来做同样的事情。但这要容易得多。我希望也在这里添加我的答案。再次感谢您。