如何使用angular5切换禁用输入（作为子组件）

Question

我正在尝试将输入加载为子组件，当我们点击点击功能时我想从父组件中切换禁用输入。

如果我将其作为父组件的基本输入保留为预期的工作，但是当我尝试实现与作为子组件加载的输入相同的效果时，禁用不会发生。

请参考以下stackblitx： https://stackblitz.com/edit/angular-input-disable-phjutj?file=app%2Fapp.component.html

Answer 1

代码的一些问题：

a) 您在 angular 组件上错误地使用了字段级属性。我改成了

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

b) 您没有使用传入的输入值，所以我将 @Input() isDisabled: boolean; 添加到输入组件

c) 使用从父组件输入的值

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

d)您的 object.keys 出现问题并引发错误 - 您必须修复它。注释掉 select 字段现在可以使用切换

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

如何使用angular5切换禁用输入（作为子组件）

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

angular

angular5