如何在 Angular 响应式表单中有条件地设置 [disabled] 属性值？

Question

在 Angular reactive form 中，我们有一个复选框，需要在我们的 save 按钮起作用之前选中它。现在，我们有一个新的要求，只在特定区域显示此复选框，这很容易通过复选框上的 environment 属性和 *ngIf 来实现。

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

我的-component.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.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>

如何在 Angular 响应式表单中有条件地设置 [disabled] 属性值？

How to conditionally set a [disabled] attribute value in an Angular Reactive Form?

javascript

angular

typescript

forms

angular-reactive-forms