Как отключить ввод из компонента в приложении Angular 5
Я работаю над приложением Angular 5. У меня реактивная форма, которая работает нормально. Теперь у меня есть требование отключить ввод, когда пользователь нажимает на флажок true ... все работает нормально, ожидайте, что я хочу знать, как отключить ввод от компонента. Я успешно получил идентификатор ввода, но не уверен, что делать дальше ???
составная часть
private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
console.info(">>>>>>> questionAnswerProvidedStateEvent ",questionAnswerProvidedState);
var elementReference = document.getElementById(questionAnswerProvidedState.QuestionId);
console.info("elementReference ",elementReference);
}
шаблон
<div *ngSwitchCase = "'textbox'"> <small>textbox</small>
<div class = "form-group">
<input *ngSwitchCase = "'textbox'"
[formControlName] = "question.key"
[id] = "question.key"
[type] = "question.type"
[(ngModel)] = "question.value"
(keyup.enter) = "onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(blur) = "onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(focus) = "previousValue=question.value"
>
</div>
</div>
следующий текст представляет собой цикл, поэтому будет много входных данных, каждый с уникальным идентификатором
в вашем машинописном коде проверьте свой флажок, если он отмечен, отключите поле ввода
сделать что-то вроде этого: if (document.getElementById("CheckBoxId").checked == true){ document.getElementById("textFieldId").disabled = true; }
ищите Pipe + ReactiveForm + Disable
Ответы 2
Создайте ссылку на шаблон #inputEl для элемента ввода и используйте его в файле компонента.
<div class = "form-group">
<input #inputEl
*ngSwitchCase = "'textbox'"
[formControlName] = "question.key"
[id] = "question.key"
[type] = "question.type"
[(ngModel)] = "question.value"
(keyup.enter) = "onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(blur) = "onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(focus) = "previousValue=question.value"
>
</div>
Создайте свойство, используя ViewChild() для элемента ввода в файле компонента .ts, и установите disabled = true
component.ts
@ViewChild('inputEl') public inputEl: ElementRef;
fun() {
this.inputEl.nativeElement.disabled = true;
}
РЕДАКТИРОВАТЬ :
Поскольку входные данные генерируются динамически и выбирается идентификатор каждого элемента.
Следующее должно помочь:
document.getElementById(questionAnswerProvidedState.QuestionId).setAttribute('disabled', 'true');
У меня много типов ввода, таких как радио, флажок и таможня .... использование ссылки ## inputEl ограничит мой код или ?? есть ли более общий способ добиться этого или использовать javascript
Все ли они динамичны?
да, они все динамически генерируются ... но каждый с уникальным идентификатором GUID
document.getElementById (questionAnswerProvidedState.Question Id) возвращает правильную ссылку на ввод html
Тогда вы пробовали этот document.getElementById(questionAnswerProvidedState.QuestionId).setAttribute('disabled', 'true');
получил ответ и опубликовал ниже
получил ответ ....
private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
console.info(">>>>>>> questionAnswerProvidedStateEvent ",questionAnswerProvidedState);
if (questionAnswerProvidedState!=null)
{
var elementReference = <HTMLInputElement> document.getElementById(questionAnswerProvidedState.QuestionId);
if (questionAnswerProvidedState.AnswerNotProvided == true)
{
elementReference.disabled = true;
}
else if (questionAnswerProvidedState.AnswerNotProvided == false)
{
elementReference.disabled = false;
}
}
}
Странный код. Я думал, вы используете реактивные формы? stackoverflow.com/questions/43500683/…
Используйте
ViewChild()для элемента ввода в файле компонента и установитеdisabled = true