Reactive form valid property return false when form is disabled

Question

I have this simple form and used in create and update cases so for create case the user will enter the data and base on validatorsI will get the form.valid (true,false). In update case I just get the data from api and set this value to the form and make the form disable;

this.form = fb.group({
  name: ['', Validators.required],
  lastName: ['', Validators.required],
  address: [''],
});

so when I make the form disabled the valid value always is false;

 ngOnInit() {
    this.form.patchValue({
      name: 'name',
      lastName: 'Last Name'
    });

    this.form.disable();
  }

stackblitz example

Originate

Answer 1

This is correct. The documentation says:

A control is valid when its status is VALID.

And the documentation of status says:

The validation status of the control. There are four possible validation status values:

• VALID: This control has passed all validation checks.
• INVALID: This control has failed at least one validation check.
• PENDING: This control is in the midst of conducting a validation check.
• DISABLED: This control is exempt from validation checks.

Your form is disabled, so it is not valid.

Eterne

is there any way to check if the form is valid when it 's disabled ? – Originate

I guess you can enable it, check if it's valid, then disable it again. But why do you care, since it's disabled? – Eterne

I use the form.valid property for button disabled , the same button for create and update so I expected in update case the form has the data so the valid property is valid so the button is enabled – Originate

I work around this by create a function and check is the form is disabled return true otherwise return form.valid but I thought it 's not right thing to do – Originate

@MuhammedAlbarmawi. I think you want to show the data and a button to "edit", when the we click on edit, you show a form to allow edit the values. So I'll create a variable (e.g. called "onEdit") and make two forms. two <div *ngIf="onEdit">..</div> and <div *ngIf="!onEdit">..</div> make the trick – Lifeguard

@Lifeguard create a variable to check the state will extra pain this just an example, I do create a function an for me it 's no look the right thing to do – Originate

@Lifeguard I can check the state of the disable instand of create a variable mthat will be useful – Originate

Answer 2

Valid will return false if the form is disabled so I found two way to work around this

instand of check the valid property directly I make a function for checking the validity

 isFormValid() : boolean { 
    return this.form.disabled ? true : this.form.valid
  }

template

<button [disabled]="!isFormValid()" (click)="update()">Update</button>

another way without create isFormValid function

<button [disabled]="!form.valid && form.disabled === false" (click)="update()">Update</button>

Originate

Sorry, but how does it check for validity of disabled form? You're returning "true" always when form is disabled, so technically, if I have two required controls with null value, your function will tell me that it's valid. – Klara

when form is disabled it always will return true – Originate

so why this should be a solution for anybody? Form could be disabled and not filled. – Klara

Answer 3

If not all your fiels of the form are disabled, at this moment, the best workaround to work with reactive forms in cases like this is to mark these fields as readonly. Is not exactly the same but in that way you can have a consistent behaviour.

Related issues:

https://github.com/angular/angular/issues/11447 https://github.com/angular/material2/issues/15399

Diatomaceous

Answer 4

For update case where the input is disabled a workaround to template drive forms to pass validation:

<div *ngIf="field.editable; else disabled">
    <ion-input ..
></ion-input> 
</div>
<ng-template #notEditable>
    <p class="disabled">Some text</p>
</ng-template>

Endowment