angular - how to change inputfield to readonly with a switch

Question

I'm working on a project where I have an input field. Below this input field, there is a switch, if the switch is disabled, the input field is readonly.

Currently, I have the following solution, which does the job but is not nice. (If I use the switch, the input field disparat for some seconds):

app.component.html

<input *ngIf="isReadonly" readonly type="text"[formControl]="title">
<input *ngIf="!isReadonly" type="text" [formControl]="title">

<div class="switch form-switch" role="switch">
  <input type='checkbox' id='switch' (click)="switch()">
  <label for='title_switch'>{{'CUSTOM_TITLE_SWITCH'|translate}}</label>
</div>

app.component.ts

isReadonly = true

switch() {
 this.isReadonly = !this.isReadonly
}

As I said, this solution works but it's not nice. Does anyone have a better idea?

Thanks!

Manish · Accepted Answer · 2020-06-18 08:27:25Z

2

Have you tried to bind the readonly attribute?

<input [readonly]="isReadonly" type="text" [formControl]="title">

answered Jun 18, 2020 at 8:27

Manish

6,32419 gold badges67 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben · Accepted Answer · 2020-06-18 08:32:33Z

0

There are many ways to achieve this. Here is one of them using a ngModel binding on your checkbox. You can use binding too on the readonly property (no need to use a *ngIf to toggle the input).

Html:

<input [readonly]="isReadonly" type="text" value="Text example">

<div class="switch form-switch" role="switch">
  <input type='checkbox' id='switch' [(ngModel)]="isReadonly">
  <label for='title_switch'>Switch</label>
</div>

Typescript:

export class AppComponent  {
  public isReadonly: boolean = true;
}

Here is a stackblitz: https://stackblitz.com/edit/angular-tabcjw

If you are using you inputs inside a formGroup simply add [ngModelOptions]="{standalone: true}" on your checkbox (as explained here: Use of [(ngModel)] within FormGroup):

<div class="switch form-switch" role="switch">
  <input type='checkbox' id='switch' [(ngModel)]="isReadonly" [ngModelOptions]="{standalone: true}">
  <label for='title_switch'>Switch</label>
</div>

edited Jun 18, 2020 at 8:32

answered Jun 18, 2020 at 8:06

Ben

4,1208 gold badges51 silver badges85 bronze badges

2 Comments

antonio Over a year ago

No, I'll get this error:ngModel cannot be used to register form controls with a parent formGroup directive.

Ben Over a year ago

Yes it's because you use formGroup. You can add [ngModelOptions]="{standalone: true}" as described here: stackoverflow.com/questions/41549426/…

Collectives™ on Stack Overflow

angular - how to change inputfield to readonly with a switch

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related