Disable radio button based on text box value in angular2 using typescript

Question

ts

objage: number;
underFlag: boolean = false
aboveFlag: boolean = false
ageValidation: any;
num: any;

ageUpdation(PATIENT_AGE) 
{
    alert(JSON.stringify(PATIENT_AGE))
    if (PATIENT_AGE > 18) 
    {
        this.underFlag = false;
        this.aboveFlag = true;
        alert("hi");
    }
    else 
    {
        this.underFlag = true;
        this.aboveFlag = false;
        alert("hi2");
    }
}

html

<td colspan="2">
    <input type="number" formControlName="PATIENT_AGE"  placeholder="Enter Age b/w 1 and 100" class="form-control input-sm"  min="1" max="100" [(ngModel)]="PATIENT_AGE" name="PATIENT_AGE" (change)="ageUpdation(PATIENT_AGE)" required/>
    <div id="forAgeDiv"><span id="forAge"></span></div>
</td>

<td>
    <input type="radio" name="PATIENT_TYPE"  formControlName="PATIENT_TYPE"  value="Pediatric" [disabled]="aboveFlag">Pediatric 
</td>

<td>
    <input type="radio" name="PATIENT_TYPE"  formControlName="PATIENT_TYPE"  value="Adolescent" [disabled]="underFlag"> Adolescent
    <br>
</td>

How to enable and disable the radio button based on textbox value. if I entered age is above 18 Adolescent radio button will enable.

else I entered age is below 18 Pediatric radio button will enable.

Where you stuck around. You should try `[disabled]="!aboveFlag" and [disabled]="!underFlag" like this — Sanoj_V
– Sanoj_V, Commented Jun 4, 2018 at 11:40

AmiLinn · Accepted Answer · 2018-06-05 06:11:58Z

1

It works for me :

<input type="number" formControlName="PATIENT_AGE"  placeholder="Enter Age b/w 1 and 100" class="form-control input-sm"  min="1" max="100" [(ngModel)]="PATIENT_AGE" name="PATIENT_AGE" required/>
 <div id="forAgeDiv"><span id="forAge"></span></div>
</td>

<td>
    <input type="radio" name="PATIENT_TYPE"  formControlName="PATIENT_TYPE"  value="Pediatric" [attr.disabled]="PATIENT_AGE < 18 || null">Pediatric 
</td>

<td>
    <input type="radio" name="PATIENT_TYPE"  formControlName="PATIENT_TYPE"  value="Adolescent" [attr.disabled]="PATIENT_AGE >= 18 || null"> Adolescent
    <br>
</td>

edited Jun 5, 2018 at 6:11

answered Jun 4, 2018 at 11:37

AmiLinn

3941 silver badge12 bronze badges

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

Comments

Esco · Accepted Answer · 2018-06-04 12:52:06Z

0

Try this... I don't understand why you're using 'formControlName' attribute. This is working for me

objage: number;
underFlag: boolean = false
aboveFlag: boolean = false
ageVaildation: any;
num: any;
patient_age: any;

geUpdation(patient_age) {
 alert(JSON.stringify(patient_age))
 if (patient_age > 18) {
    this.underFlag = false;
    this.aboveFlag = true;
    alert("hi");
 }else {
    this.underFlag = true;
    this.aboveFlag = false;
    alert("hi2");
 }
}

<td colspan="2">
 <input type="number" placeholder="Enter Age b/w 1 and 100" class="form-control input-sm"  min="1" max="100" [(ngModel)]="patient_age" name="patient_age" (change)="ageUpdation(patient_age)" required/>
 <div id="forAgeDiv"><span id="forAge"></span></div>
</td>
<td>
 <input type="radio" name="patient_type"   value="Pediatric" [disabled]="aboveFlag">Pediatric 
</td>
<td>
 <input type="radio" name="patient_type"  value="Adolescent" [disabled]="underFlag"> Adolescent
</td>

answered Jun 4, 2018 at 12:52

Esco

3972 gold badges3 silver badges16 bronze badges

1 Comment

Revathi Vijay Over a year ago

Without using formcontroler it is already working for me.I need to use formcontrol to save record in databse.if i use formcontrol it is not working.How to disable with formcontrol

Collectives™ on Stack Overflow

Disable radio button based on text box value in angular2 using typescript

ts

html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ts

html

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related