How to disable the input text based on *ngif in angular4

Question

how to disable textbox if the ngifcondition satisfies on text box field.

Below didnt work for me


<input [ngClass]="{'disbaled' : !isprecheck}" type="text" class="form-control" id="title" name="title"
                           [(ngModel)]="stunt.title" #Title="ngModel" required minlength="1" maxlength="255">

Answer 1

If you use declarative forms as now use the disabled attribute like [disabled]="condition" but if you are learning angular I suggest to take a look at reactive forms they are way more powerful: https://angular.io/guide/reactive-forms

Answer 2

component.html

<input [disabled]="isprecheck" type="text" class="form-control" id="title" name="title" [(ngModel)]="stunt.title" #Title="ngModel" required minlength="1" maxlength="255">

component.ts

isprecheck: boolean = true;

Answer 3

What your current code does is to add a class named disbaled to your input element if isprecheck condition is satisfied.

Also using *ngIf hides your input if the Boolean condition negates.

If you want to show the element but disable it, use [disabled] with your boolean.

<input [ngClass]="{'disbaled' : !isprecheck}" type="text" class="form-control" id="title" name="title" [(ngModel)]="stunt.title" #Title="ngModel" required minlength="1" maxlength="255" [disabled]=“!isprecheck”>