Как отключить отключение при вводе (как дочерний компонент) с помощью angular5
Я пытаюсь загрузить ввод как дочерний компонент, а из родительского, когда мы нажимаем на функцию щелчка, я хочу отключить ввод.
Если я использую в качестве базового ввода для родительского компонента, его работу ожидаемо, но когда я пытаюсь добиться того же, что и при загрузке ввода как дочерний компонент, отключения не происходит.
см. ниже stackblitx: https://stackblitz.com/edit/angular-input-disable-phjutj?file=app%2Fapp.component.html
Ответы 1
Несколько проблем с кодом:
a) Вы неправильно используете атрибут уровня поля в компоненте angular. Я изменил это на
<app-number-field
formControlName = "officeNumber"
[isDisabled]='disableTextbox'>
</app-number-field>
б) вы не используете переданное входное значение, поэтому я добавил @Input() isDisabled: boolean; во входной компонент
c) Используйте то значение, которое вводится из родительского компонента как таковое.
<input class = "number" type = "number" pattern = "[0-9]*" placeholder = "{{placeholder}}" [value] = "number" [disabled] = "isDisabled" (change) = "onNumberChange($event)" (keyup) = "onNumberChange($event)">
г) Возникла проблема с вашим object.keys, которая выдает ошибку - вы должны ее исправить. Комментируя поле выбора, теперь переключатель работает
StackBlitz: https://stackblitz.com/edit/angular-input-disable-4dyjsw
@Krish Для того, чтобы это работало, у вас должна быть кнопка Edit во входном компоненте. Таким образом, переключение повлияет только на ввод в этом компоненте. Это будет означать, что вы удалите передачу логического значения дочернему компоненту.
что вы имеете в виду, что у меня есть кнопка редактирования во входном компоненте? как часть этого входного компонента в качестве атрибута [isDisabled] мне нужно добавить еще один для Редактировать? или что-нибудь еще, что вы пытались сказать?
@Krish Обязательно ли наличие кнопки Edit на родительском компоненте? Почему бы просто не переместить кнопку «Изменить» внутри компонента ввода в input.component.html?
спасибо, его работа, как ожидалось. еще один вопрос поверх этого. предположим, если у нас есть более одного поля с возможностью редактирования. когда мы нажимаем на редактирование, как отключить соответствующее поле? stackblitz.com/edit/angular-input-disable-7dq7gr?file=app/…