0

I am working on Angular 5 application. I have reactive form which are all working fine. Now I have requirement to disable input when user click on checkbox true.. all is working fine expect I want to know how to disable input from component. I successfully get id of input but not sure what do next???

component

private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
  console.log(">>>>>>> questionAnswerProvidedStateEvent ",questionAnswerProvidedState);
  var elementReference = document.getElementById(questionAnswerProvidedState.QuestionId);
  console.log("elementReference ",elementReference);
}

template

 <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>

following text is loop, so there will many input each with unique id

Improve this question
4
  • Use ViewChild() for input element in the component file and set disabled = true Commented May 24, 2018 at 14:00
  • in your typescript code, test your checkbox, if it is checked then disable the input field Commented May 24, 2018 at 14:01
  • do something like this : if (document.getElementById("CheckBoxId").checked == true){ document.getElementById("textFieldId").disabled = true; } Commented May 24, 2018 at 14:04
  • look for Pipe+ReactiveForm+Disable Commented May 24, 2018 at 16:30

2 Answers 2

Reset to default
5

Create template reference #inputEl for input element and use it in component file. 

<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>

Create a property using ViewChild() for input element in the component .ts file and set disabled = true

component.ts

@ViewChild('inputEl') public inputEl: ElementRef;

fun() {
  this.inputEl.nativeElement.disabled = true;
}

EDIT :

Since the inputs are generated dynamically and the id of each element is being fetched.

Following should help:

document.getElementById(questionAnswerProvidedState.QuestionId).setAttribute('disabled', 'true');

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

6 Comments

I have many input type like radio, checkbox and customs.... using ##inputEl reference will restrict my code or?? is there more generic way to achieve this or using javascript
Are they all dynamic?
yes they are all dynamically generated ... but each with unique GUID id
document.getElementById(questionAnswerProvidedState.QuestionId) brings back correct reference of html input
got answer and posted below
|
0

got answer....

private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
  console.log(">>>>>>> 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;
    }
  }   
}
Improve this answer

1 Comment

That's weird code. I thought you were using reactive forms? stackoverflow.com/questions/43500683/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.