Question

我试图根据是否选中复选框来启用/禁用Angular应用程序中“反应形式”上的按钮。

预期结果： 页面加载时，应取消选中该复选框，并且应禁用该按钮。仅在选中此复选框后才能启用该按钮。

这是我的TS文件中的代码：

this.emailForm = this.fb.group({
    conditions: new FormGroup({
        acceptTerms: new FormControl(false, Validators.requiredTrue),    
        })
})

这是我的HTML：

<div class="form-group">
    <label class="control-label" for="acceptTerms">Accept:</label>
    <checkbox
        formControlName="acceptTerms"
        id="acceptTerms"
        heading="Accept"
        name="acceptTerms"
        value="Accept">
    </checkbox>
</div>

<button button
    class="btn"
    type="submit"
    title="Submit"
    data-kind="primary"
    [disabled]="emailForm.controls['acceptTerms'].invalid>
    Submit
</button>

实际结果： 使用此实际代码，我无法选中该复选框，并且在页面加载时也启用了该按钮。

有人可以告诉我我需要进行哪些更改才能获得预期的结果吗？

Answer 1

我会听取对元素的更改并设置一个变量，然后将其绑定到Disabled属性

 let isChecked = false;

  this.emailForm.get(['conditions','acceptTerms']).valueChanges.subscribe(val => {
      isChecked = val ? true : false;
  });

<button
    class="btn"
    type="submit"
    title="Submit"
    data-kind="primary"
    [disabled]="!isChecked">
    Submit
</button>

Answer 2

我设法通过以下代码解决了这个问题：

TS：

this.emailForm = this.fb.group({
    conditions: new FormGroup({
        acceptTerms: new FormControl(false, Validators.required)
    })
});

HTML：

<button
    [disabled]="emailForm.controls['conditions'].controls['acceptTerms'].value === false">Next
</button>

使用此选项，在页面加载时，未选中该复选框，并且该按钮被禁用。当我选中该复选框时，该按钮即被启用。

如果我再次取消选中该按钮，则会再次禁用该按钮。

如何在Angular Reactive Form的FormBuilder中预先设置一个复选框，以及如何基于该复选框启用/禁用按钮

2 个答案: