How to disable the input box using the ngIf condition?

Question

<input pInputText type="text" formControlName="description" class="form-control" placeholder="Required" *ngIf="pageModes[formModel.schema.mode] === pageModes[pageModes.View] />

Above is the input box which I used.. My condition:

IF(pageModes[formModel.schema.mode] === pageModes[pageModes.View])
{
    -----------(disable the input box)-------------------
}
ELSE
{
    -----------(enable the input box)-------------------
}

When I simply use the condition pageModes[formModel.schema.mode] === pageModes[pageModes.View], the input box got invisible.

Can anybody help me to disable the input box using the condition "pageModes[formModel.schema.mode] === pageModes[pageModes.View]"

You need to disable the corresponding FormControl in your TypeScript code: https://angular.io/api/forms/AbstractControl#disable — JB Nizet, May 09 '19 at 07:15
When I used this, input got invisible.. I need to disable the input — Angel Reji, May 09 '19 at 07:20
Possible duplicate of [Disable input based on a condition](https://stackoverflow.com/questions/51714933/disable-input-based-on-a-condition) — ikramf90, May 09 '19 at 07:36

Jonas Johansson · Answer 1 · 2019-05-09T09:19:06.200

1

You could use [disabled]="*** your condition ***" instead. Every html attribute on input elemets can be binded by using [attribute].

In your case this would be:

<input pInputText 
    type="text" 
    formControlName="description" 
    class="form-control" 
    placeholder="Required" 
    [disabled]="pageModes[formModel.schema.mode] === pageModes[pageModes.View] />

You could also use the formControlName and set disabled in the controller.

edited May 09 '19 at 09:19

answered May 09 '19 at 07:15

Jonas Johansson

417
3
8

I have multiple conditions. disable functioning need to work only when the condition, "pageModes[formModel.schema.mode] === pageModes[pageModes.View]" happens. When I used the condition which you told, it affects to all conditions. – Angel Reji May 09 '19 at 07:23
Thank you for your reply.. I used [attr.disabled] = "pageModes[formModel.schema.mode] === pageModes[pageModes.View] ? 'disabled' : null".. And now its working – Angel Reji May 09 '19 at 08:23
You're welcome. Together we can learn more so I'm happy to help. You shouldn't need to use attr.disabled though. disabled should be enough. Feel free to accept or upvote the answer :) – Jonas Johansson May 09 '19 at 09:16

score 0 · Answer 2 · answered May 09 '19 at 07:44

0

Remove your *ngIf and add disabled to your formControl:

// Whereever you're building your form:
description: new FormControl({value: '', disabled: pageModes[formModel.schema.mode] === pageModes[pageModes.View]})

answered May 09 '19 at 07:44

Roberto Zvjerković

9,657
4
26
47

Can u give me a demo?? – Angel Reji May 09 '19 at 08:10

score -1 · Answer 3 · answered May 09 '19 at 07:32

-1

add inputDisabled Property into your component

export class Component{
   get inputDisabled(){
    return // add your disable logic here 
   }
}

set this property to input attribute

<input [disabled]="inputDisabled"  .../>

answered May 09 '19 at 07:32

onik

1,579
1
11
19

How to disable the input box using the ngIf condition?

3 Answers3