Angular 7 表单和 Bootstrap 复选框在选中时验证表单，但在未选中时不会失效答案

【问题标题】：Angular 7 form and Bootstrap checkbox validates form when checked but doesn't invalidate when uncheckedAngular 7 表单和 Bootstrap 复选框在选中时验证表单，但在未选中时不会失效
【发布时间】：2019-10-03 06:27:37
【问题描述】：

我有一个带有 T of S 复选框的注册表单。“注册”按钮（表单）在表单有效时启用，在无效时禁用。我可以填写表格并选中复选框，然后注册按钮变为启用/可点击。所以表格是有效的，但是当我取消选中它时，注册按钮仍然启用/可点击，表格仍然有效。不会失效！

仅供参考 - 我在输入“名称”和“[已检查]”中添加了一些语句，以查看是否可以使其工作，但没有运气。

这是我的表单和一些 .ts 代码。为了简短起见，省略了一些代码。

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit, AfterViewInit {
  // some variables here removed
  registerForm: FormGroup;
  bsConfig: Partial<BsDatepickerConfig>;
  terms = false;
  
  

  constructor(private authService: AuthService, private router: Router,
              private alertService: AlertService, private fb: FormBuilder, private zone: NgZone) {}

  ngOnInit() {
    this.bsConfig = {
      containerClass: 'theme-red'
    };
    this.createRegisterForm();
  }
  
  createRegisterForm() {
    this.registerForm = this.fb.group({
      terms: ['', Validators.required],
    });
  }

<form [formGroup]="registerForm" (ngSubmit)="register()">
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" id="gridCheck" 
         [ngClass]="{'is-invalid': registerForm.get('terms').errors && registerForm.get('terms').touched}" 
         name="terms" 
         type="checkbox"  
         formControlName="terms">
      <label class="form-check-label" for="gridCheck">Agree to terms</label>
    </div>
  </div>

  <div class="form-group text-center">
    <button class="btn btn-yb w-100" [disabled]="!registerForm.valid" type="submit">
        <span *ngIf="loadingRegister" class="spinner-border spinner-border-sm color-yb-white" role="status" aria-hidden="true"></span>
        <span class="sr-only">Loading...</span>
        <span *ngIf="!loadingRegister">Register</span>
    </button>
  </div>
</form>

【问题讨论】：

通过“formControlName”将“terms”控件绑定到输入就足够了。也不需要将 [checked] 绑定到它。事实上，我怀疑这可能是问题所在。
我试过没有。再次尝试，取消选中复选框时仍然无法使表单无效。我只是想知道是否应该尝试使用 ngx-bootstrap 元素？我认为这不重要，但是？我会从 OP 中删除它

标签： angular twitter-bootstrap typescript angular-forms angular-validation

【解决方案1】：

啊，以前没见过：

您需要使用 Validators.requiredTrue 才能使复选框控件正常工作。

【讨论】：

啊哈！我对 Angular 有点陌生，不知道那是新手。谢谢！