javascript - 如何有条件地在 Angular Reactive Form 中设置 [disabled] 属性值？

Question

在 Angular 响应式(Reactive)表单 中，我们有一个复选框，需要在我们的 save 按钮起作用之前选中它。现在，我们有一个新要求，即只在特定区域显示此复选框，这可以通过复选框上的 environment 属性和 *ngIf 轻松实现。

但是，如何有条件地使 save 按钮的 [disabled] 属性不关心复选框？

我的组件.component.html

      <div *ngIf="isMyCheckboxRegion">
        <input [formControl]="myCheckbox" type="checkbox" id="my-checkbox">
        <label for="my-checkbox">Please check this box</label>
      </div>

      <div>
        <button validationgroup="SaveMyForm"
          (click)="onSubmit()" [disabled]="anotherFormGroup.invalid || myCheckbox.invalid">Save</button>
      </div>

我的组件.component.ts

import { environment } from 'src/environments/environment';

    export class myComponent implements OnInit {
        public isMyCheckboxRegion = environment.isMyCheckboxRegion;
        public myCheckbox = FormControl('', Validators.requiredTrue);
    }

Answer 1

尝试有条件地设置 Validators.requiredTrue:

public myCheckbox = FormControl('', this.isMyCheckboxRegion ? Validators.requiredTrue : undefined);

由于有条件地应用验证器，无论复选框的值如何，myCheckbox.invalid 都应为 false。

---

替代方案:

您还可以在 HTML 中使用 isMyCheckboxRegion:

<button 
 validationgroup="SaveMyForm"
 (click)="onSubmit()" 
 [disabled]="anotherFormGroup.invalid || (isMyCheckboxRegion && myCheckbox.invalid)"
>Save</button>