CODEWITHSUNDEEP
angulartypescriptradio-button
K.Z
K.Z

Reputation: 5075

how to disable radio button in angular 5 app

I need to disable radio button by another external checkbox click event which is generated dynamically using reactive form/ formGroup.

my component code works for textbox and dropdown but not for radio or checkbox

this is generated code

    <label _ngcontent-c6="" class="container-vertical"> Dog
    <input _ngcontent-c6="" type="radio" ng-reflect-form-control-name="01cb437e-0015-4c45-9828-fb2d1d" ng-reflect-value="8f77b6e1-2495-4781-9e40-520e94" ng-reflect-name="01cb437e-0015-4c45-9828-fb2d1d" class="ng-untouched ng-pristine ng-invalid"> 


    <label _ngcontent-c6="" class="container-vertical"> Cat
    <input _ngcontent-c6="" type="radio" ng-reflect-form-control-name="01cb437e-0015-4c45-9828-fb2d1d" ng-reflect-value="4102b66c-b8c3-4d41-afcd-5852e4" ng-reflect-name="01cb437e-0015-4c45-9828-fb2d1d" class="ng-untouched ng-pristine ng-invalid"> 

    <label _ngcontent-c6="" class="container-vertical"> Fish
    <input _ngcontent-c6="" type="radio" ng-reflect-form-control-name="01cb437e-0015-4c45-9828-fb2d1d" ng-reflect-value="5dc08818-38b0-4563-8e0a-ce8901" ng-reflect-name="01cb437e-0015-4c45-9828-fb2d1d" class="ng-untouched ng-pristine ng-invalid">

template

<div *ngSwitchCase="'radio'">
           <div *ngFor="let opt of question.options" > <small>radio</small>
               <label class="container-vertical"> {{opt.value}}
                       <input type="radio" 
                              [formControlName]="question.key"  
                              [value]="opt.key" 
                              [(ngModel)]="question.value"
                              (change)="onChangeValue(question.value, previousValue, responseId, question.key, 'radio'); previousValue = question.value" 
                              (focus)="previousValue=question.value"
                              > 


                       <span class="checkmark"></span>
               </label>
           </div> 
       </div>

component

  private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
 {

   var formControlNameReference = questionAnswerProvidedState.QuestionId.substring(1,30);
//  ???????????? need help here ... how to get reference of radio button to disable it

  if(questionAnswerProvidedState!=null)
  {
    var elementReference = <HTMLInputElement> document.getElementById(questionAnswerProvidedState.QuestionId);
    if(questionAnswerProvidedState.AnswerNotProvided == true)
    {
      elementReference.disabled = true;
      elementReference.value = "";
      elementReference.classList.add("disableInput");
    }
    else if(questionAnswerProvidedState.AnswerNotProvided == false)
    {
      elementReference.disabled = false;
      elementReference.classList.remove("disableInput");
    }
  } 
}

Upvotes: 1

Views: 6363

Answers (1)

Sudharsan Ramanujam
Sudharsan Ramanujam

Reputation: 21

<input type="radio" [(ngModel)]="radioButtonVisibility" [attr.disabled]="flag ? '' : null" 
       formControlName="radioButtonVisibility"/>

Use the above attribute [attr.disabled]. If the variable flag contains any value then the radio button will be disabled. If the variable flag is null then the radio button will be enabled. The flag value has to be set to null or not null as per the requirement.

Upvotes: 2

Related Questions