50

I was attempting to answer someone elses question. And in doing so realised there was quite a bit of uncertainty in my mind about a few things. I'm hoping someone can provide feedback on the numbered points 1..4:

Task: Conditionally make input field readonly

Relevant section of HTML:

<input type="text" placeholder="Club Name" #clubName>

Add this to Typescript component.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

Have to say this is a grey area for me.

  1. Is referencing HTMLInputElement or Element directly with @ViewChild in Angular 2+ a bad practice? Only, I've often seen examples using ElementRef or chaining off to nativeElement from ElementRef.

Since VS Studio doesn't have Intelli-sense for those, I suddenly feel like I'm coding in the dark. i.e, you never get feedback about methods setAttribute or removeAttribute, their parameter requirements etc. (I'm aware of As to cast too)


  1. Then, after looking at the docs, I suspect you can do this directly on your input in the HTML template:

<input [attr.readonly]= "isReadOnly">

IIRC I think you have to do this way with a property get in Typescript:

get isReadOnly() :boolean {
}

Is this way valid?


  1. I'm wondering, can you do the method syntax too in the HTML template:

<input [attr.readonly]= "isReadOnly()">

Typescript

isReadOnly() :boolean {
}

Is this way valid?


4. In summary, what's the best approach?

Update: There is also *ngIF so you output one of two input elements with same name. But that sounds to me like a sledgehammer to crack a nut.

1
  • Define valid.... Because if you're asking if it works then test it and find out. This is a very broad question.... I use 2 & 3 on seperate occasions depending on what I need to compute to determine the bool.
    – Zze
    Commented Jul 20, 2017 at 22:54

9 Answers 9

125

You need to use the following (Angular 4):

<input [readonly]="isReadOnly">

If you use att.readonly then the input will always be read-only because the readonly attribute will be present even if its value is false. By using [readonly] Angular will only place the attribute if isReadOnly is true.

In HTML, the following is sufficient to cause an input to be read-only:

<input readonly>
1
  • This worked! As my condition depended on a FormControl value and I had to share the data to a child component, I ended up having some additional code. In the parent template: <child-component [isReadOnly]="isSomeFormControlName.value === 'true'"> and this code in my child component: @Input() isReadOnly: boolean; Commented Jan 26, 2022 at 16:18
5

None of them worked for me.. Finally found solution by creating custom directive angular.. Directives are powerful feature of angular

  1. Create Custom Directive

@Directive({
  selector: '[readonly],[readOnly]',
  host: {
    '[attr.readonly]': '_isReadonly ? "" : null'
  }
})
class ReadonlyDirective {
  _isReadonly = false;

  @Input() set readonly (v) {
     this._isReadonly = coerceBooleanProperty(v);
  };

  ngOnChanges(changes) {
    console.log(changes);
  }
}

  1. Add into module declarations

@NgModule({
  ...
  declarations: [ ..., ReadonlyDirective ],
  ...
})
3. Now its time to use directive as following.

<input [(ngModel)]="name" [readonly]="isReadonly" />
or
<input [(ngModel)]="name" readonly />
Directives are powerful feature of angular, I strongly recommend you to go through https://angular.io/guide/attribute-directives

Demo https://stackblitz.com/edit/angular-readonly-input-aifncy?file=src/app/app.component.ts

4

All depends on what you want to achieve. At first look, I would say that pct. 2 is the simplest way to do it:

<input [attr.readonly]= "isReadOnly">

Then, on your component you declare the variable:

isReadOnly: boolean;

After, you assign the value as you wish:

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;
1
  • 4
    If you use att.readonly then the input will always be read-only because the readonly attribute will be present even if its value is false. By using [readonly] Angular will only place the attribute if isReadOnly is true. This answer is wrong. Read the accepted answer. Commented Jul 28, 2020 at 8:45
3

Many times you may need the attribute readonly not to be present at all in case of false (for example because of styling or inherited functionality). You can achieve that by setting the value to null:

[readonly]="shouldBeReadonly ? 'readonly' : null"

null removes the attribute from the element.

0

i have fixed it :)

<input matInput type="text" (focus)="userNameFocus()" placeholder="Username" #u1 formControlName="userName" autocomplete="off" />

// initialize form on userName focus
<input matInput [type]="inputType" style="-webkit-text-security: square;" #p2 formControlName="password" />
0

There is a more simple solution, just use

@Input('readonly') readonly: boolean
ngOnInit(){
  this.readonly= this.readonly!== undefined && this.readonly!== false
}

now the readonly attr on your component will be

false:
<app-component>
<app-component [readonly]='false'>

true:
<app-component readonly>
<app-component [readonly]='true'>
1
  • I am afraid I find @phn solution - posted back in 2017 far simpler!
    – JGFMK
    Commented Apr 20, 2022 at 14:35
0

When I tried the solution in the top answer, I got the following error:

Can't bind to 'readOnly' since it isn't a known property of 'select'.ngtsc(-998002)

The solution that ended up working for me was:

[attr.readonly]="isReadonly() ? true : null"

I think "attr." is necessary and "null" is necessary to remove the readonly attribute entirely (rather than merely set to false, which still makes the element readonly).

1
-1

You can use <input readonly="{{ variable }}>".

In your *.component.ts, initialize the variable:

private variable: boolean = true;
1
  • 3
    This adds the readonly attribute to the input regardless of the value of variable.
    – lortimer
    Commented Jun 10, 2020 at 14:58
-1

component.html

<input matInput formControlName="status" [readonly]="!status" />

component.ts

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;
1
  • Why would changing isReadOnly do anything to the html input or the formControl? Nothing is bound to isReadOnly in your example. Commented Nov 13, 2021 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.