How to disable the input box using the ngIf condition?

Related searches
<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]"

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]})

How to disable a input in angular2, Well organized and easy to understand Web building tutorials with lots of examples Disable form fields: <input type="checkbox" ng-model="all"> The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). Disable a button after click Angular example. This Angular example shows how to disable a button after it is clicked. To do that disabled property of the button is bound to a boolean flag and that flag’s value is set by calling a function on the button click event.

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.

Angular ng-disabled Directive, Declarative templates with data-binding, MVC, dependency injection and ngHref � ngIf � ngInclude � ngInit � ngJq � ngKeydown � ngKeypress � ngKeyup If the expression is truthy, then the disabled attribute will be set on the <label> Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/> < button� The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false .

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"  .../>

ngDisabled, This article will illustrate how to enable or disable TextBox on with example, how to use ng-disabled directive with condition (IF ELSE) in AngularJS. <input type="checkbox" id="chkPassport" ng-model="HasPassport"� The enable() and disable() methods are simply wrappers for boolean properties on the FormControl. When using ReactiveForms in HTML, Angular adds the disabled class to any input elements which have been disabled. Step 4: (Optional). If you are using Bootstrap 3, you will have default support for disabled input controls.

Using ng-disabled with condition (IF ELSE) in AngularJS, It is usually applied on form field (input, select, button, etc). example uses ng- disabled Directive to enable and disable button using checkbox. Here Mudassar Ahmed Khan has explained with an example, how to enable or disable Button based on condition (IF ELSE) in AngularJS. This article will illustrate how to enable or disable Button using ng-disabled directive by conditionally setting it using a Boolean variable inside Controller in AngularJS.

AngularJS, This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.) if the expression inside ngDisabled evaluates to truthy. A special directive is necessary because we cannot use interpolation inside the disabled attribute. See the interpolation guide for more info.

How to use *ngIf else in Angular. In this tutorial, we are going to take a look at the ngIf directive. We will discover how we can use it to show or hide parts of our angular application. Also, we will find out how the ngIf directive differs from using the "hidden" attribute.

Comments
  • You need to disable the corresponding FormControl in your TypeScript code: angular.io/api/forms/AbstractControl#disable
  • When I used this, input got invisible.. I need to disable the input
  • Possible duplicate of Disable input based on a condition
  • Can u give me a demo??
  • 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.
  • Thank you for your reply.. I used [attr.disabled] = "pageModes[formModel.schema.mode] === pageModes[pageModes.View] ? 'disabled' : null".. And now its working
  • 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 :)