how to toggle disable on input (as child component) using angular5

Question

I am trying to load input as child component, and from the parent when we click on on-click function i want to toggle disable the input.

If i keep as basic input on the parent component its work as expected, but when i try to achieve the same as if the input loaded as child component, the disable is not happening.

please refer below stackblitx: https://stackblitz.com/edit/angular-input-disable-phjutj?file=app%2Fapp.component.html

zer0 · Accepted Answer · 2018-12-03 05:02:28Z

1

Few issues with the code:

a) You are incorrectly using a field level attribute on an angular component. I changed it to

<app-number-field 
    formControlName="officeNumber" 
    [isDisabled]='disableTextbox'>
  </app-number-field>

b) you are not using the passed in input value so I added @Input() isDisabled: boolean; to the input component

c) Use that value that is being input from the parent component as such

<input class="number" type="number" pattern="[0-9]*" placeholder="{{placeholder}}" [value]="number" [disabled]="isDisabled" (change)="onNumberChange($event)" (keyup)="onNumberChange($event)">

d)There is a problem with your object.keys that is throwing an error - you have to fix it. Commenting out the select field gets the toggle working now

StackBlitz: https://stackblitz.com/edit/angular-input-disable-4dyjsw

answered Dec 3, 2018 at 5:02

zer0

5,0458 gold badges34 silver badges52 bronze badges

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

4 Comments

Krish Over a year ago

thanks, its work as expected. one more question on top on this. suppose if we have more than one field with edit option. when we click on edit how to toggle the respective field to disable ? stackblitz.com/edit/angular-input-disable-7dq7gr?file=app/…

zer0 Over a year ago

@Krish For this to work, you need to have the Edit button in the input component. So, toggle will affect only the input in that component. That would mean that you remove passing the boolean into the child-component.

Krish Over a year ago

what you mean that i have the edit button in the input component ? as part of that input component as a attribute [isDisabled] am i need to add one more for Edit ? or anything else you were trying to say ?

zer0 Over a year ago

@Krish Is it necessary that you have the Edit button on the parent component? Why not just move the Edit button inside the input component in input.component.html ?

Collectives™ on Stack Overflow

how to toggle disable on input (as child component) using angular5

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related