Is there a way to set [disabled] with help from a custom validation

Question

I have a custom validation for if a condition is true. Based on that condition I would like to set disabled on a input field in a formgroup. If I use the condition with *ngIf it works fine but if I use the same condition with [disabled]= nothing is happening.

// working part
<div *ngIf="groupForm.errors?.validateForMr && (groupForm.touched || groupForm.dirty)" class="cross-validation-error-message alert alert-danger">
    Name cannot match alter ego.
</div>

// and the part I can't get to work
<input type="text" [disabled]="!groupForm.errors?.validateForMr" id="mr_nr" class="form-control" formControlName="mr_nr" (focus)="focusIn(2)" (focusout)="focusOut(2)">

Anyone have a suggestion?

`[disabled]="!(groupForm.errors?.validateForMr && (groupForm.touched || groupForm.dirty))"` ? , not the same condition, did you try that. — SeleM, Dec 27 '18 at 12:23
Issue with attribute binding use `[attr.disabled]="(!groupForm.errors?.validateForMr) ? true : null"` — RANJIT PATRA, Dec 27 '18 at 12:26
ranjit patra Now it works! It is the true or null response. Thanks — Mikael, Dec 27 '18 at 12:42

score 1 · Answer 1 · answered Dec 27 '18 at 12:52

It is not wise to disable formControl in html page..

If you are using Reactiveforms you can try this code in your Component.

this.yourFormName.controls['yourFormControlName'].disable(); to disable input and this.yourFormName.controls['yourFormControlName'].enable(); to enable back.

Is there a way to set [disabled] with help from a custom validation

1 Answers1