CODEWITHSUNDEEP
angular
Jmainol
Jmainol

Reputation: 437

On an Angular form how to disable submit button when a formControl.status === 'DISABLED'

I need to disable submit button (Accept Button) when these two conditions meet:

  1. form.valid !== true or what is the same !form.valid
  2. formControl ProductType status is not disabled 
    this.form.controls.productType.status !== 'DISABLED'

ProductType is a required formControl, so it has to have a value for form.valid to be true. The problem comes when productType formControl is disabled momentarily when changing the value of its grandfather formControl. I need this behavior to force the user to fill up the fields in this order: Category > Family > ProductType

enter image description here

In this moment, although ProductType formControl is required, as its status is DISABLED, it´s like it doesnt count and the condition form.valid is true. Anyway when productType formControl is disable I need to disable the submit button. I tried this, but it doesnt work:

<button type="button" 
        [disabled]="!form.valid && form.controls.productType.status !== 'DISABLED'" 
        (click)="submit()">
</button>

Any idea guys?

Upvotes: 0

Views: 5812

Answers (1)

ariel nimni
ariel nimni

Reputation: 24

every form control have a disabled property that you can check if he true or false.

so try this:

<button type="button" 
        [disabled]="!form.valid && !form.controls.productType.disabled" 
        (click)="submit()">
</button>

for more info you can go here: https://angular.io/api/forms/FormControl

Upvotes: 1

Related Questions