Dynamically enabling and disabling inline-editor does not work

[mumairofficial]

I am working on pilot project and I figured out if toggle editable status dynamically then it does not work. angular version is 4.4.4 and cli 1.4.4

here is example piece

<inline-editor type="text" [(ngModel)]="eventDetails.title" disabled="!isEditable" (onSave)="onUpdateEventDetail({title: $event})" size="8"></inline-editor>

IsEditable Enabled: {{isEditable}} <- this toggled but inline-editable didn't show input box

<button class="btn btn-default" (click)="onToggleEditableFields()">Edit Values</button>

Ts:

export class MyComponent {
  public isEditable = false;

  public onToggleEditableFields(): void {
    this.isEditable = !this.isEditable;
  }
 // .... more code
}

I also have tried [disabled] no progress. Please guide me if I am doing it wrong.

[tonivj5]

Hi @mumairofficial, it's working for me. I have copied your example, but I'm using [disabled] instead of disabled, it's required.

[flaska]

+1 This also doesn't work for me :(

[flaska]

<inline-editor type="textarea" [(ngModel)]="descriptor.concept[0].scopeNote" [disabled]="!editMode" (onSave)="elementModified.emit()" id="scope_note" cols="100" rows="6"></inline-editor>

[tonivj5]

Please @fleska or @mumairofficial, can you provide us a demo or reproducible repo? Because it is working for me. Thanks :+1:

[mumairofficial]

@xxxtonixxx I was very busy in project hopefully following will help you to understand the problem.

Note: I am using [disabled] in following example, and gif shows disabled without [] brackets

You will notice after toggling; cursor is still disabled (can't edit the value)

Reproduce steps:

• Brand new angular-cli based project
• installed inline-edit, bootstrap, font-awesome and

app.component.html

<div class="container">
  <div class="form" style="text-align: center; margin-top: 100px">
    <strong>Simple</strong>
    <inline-editor type="text" [(ngModel)]="default" (onSave)="saveEditable($event)" name="default" size="8"></inline-editor>
    <br>
    
    <strong>disabled="false"</strong>
    <inline-editor type="text" [(ngModel)]="withFlgFalse" (onSave)="saveEditable($event)" name="withFlgFalse" [disabled]="false"
      size="8"></inline-editor>
    <br>
    
    <strong>disabled="true"</strong>
    <inline-editor type="text" [(ngModel)]="withFlgTrue" (onSave)="saveEditable($event)" name="withFlgTrue" [disabled]="true" size="8"></inline-editor>
    <br>
    
    <strong>disabled="isEditable"</strong>
    <inline-editor type="text" [(ngModel)]="withIsDisabledFlg" (onSave)="saveEditable($event)" name="withIsDisabledFlg" [disabled]="isEditable"
      size="8"></inline-editor>
    <hr>
    <a (click)="toggleEdit($event)">Toggle isEditable</a> | IsEditable: <strong>{{isEditable}}</strong>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My component!';
  isEditable = true;

  default = 'Default example';
  withIsDisabledFlg = 'With isDisabled flg';
  withFlgTrue = 'disabled flg true';
  withFlgFalse = 'disabled flg false';

  saveEditable(value) {
    console.log('http.service: ' + value);
  }

  toggleEdit(e) {
    e.preventDefault();
    this.isEditable = !this.isEditable;
  }
}

[flaska]

Very good demo! It was exactly the same problem for me. :+1:

[tonivj5]

Thank you very much for you effort @mumairofficial, I think it is enough to test it :+1:

[mandeeps1]

+1 not working for me either.... :(

[Rassamdul]

@mumairofficial How would it benefit you from opening a input field that is disabled? I want it to be enabled when i open it by button press.

[mumairofficial]

@Rassamdul thank you for comment... Actually I forgot the scenario; basically I was trying to enable/disable pragmatically based upon some criteria

[divya130]

This also doesn't work for me , anyone got the solution??