Angular 8 反应式表单：复选框不可点击

Question

我有一个嵌套的 Formgroup，带有一个用于复选框的 formcontrol，如下所示

 this.myForm = this.formBuilder.group({
  locationFormGroup: this.formBuilder.group({
    title: ['', Validators.required],
    description: ['', Validators.required],
    address: ['', Validators.required],
    city: ['', Validators.required],
    province: ['', Validators.required],
    postalCode: ['', Validators.required],
    hideAddress: [''],
    hideCompany: ['']
  })
});

和模板如下

  <div class="col-md-6 col-sm-12">
      <div class="card card-body">
          <div class="checkbox c-checkbox">
              <h4>
                  <input class="form-control" formControlName="hideCompany" name="hideCompany"  type="checkbox" checked="" />
                  <span class="fa fa-check"></span>Hide Company Name
              </h4>

          </div>
      </div>
    </div>

注意到奇怪的行为，复选框不可点击但点击名称 check/uncheck。

Answer 1

如果您希望名称可点击并控制复选框，您需要将其包装在标签标签中并为复选框指定一个 ID

<input id="hideCompany">
<label for="hideCompany">Hide Company Name</label>

参见：https://stackblitz.com/edit/angular-1djrxi
点击复选框或标签作品

p.s.: 你在 ngOnInit 或构造函数中初始化 myForm 吗？如果是，则没有必要。您可以在组件本身中执行此操作，请参阅我的示例。

p.p.s：不要忘记将表单包装在 formGroup 指令中。

Angular 8 反应式表单：复选框不可点击

Angular 8 Reactive Form: Checkbox is not clickable

font-awesome

angular