enable/disable an input form field based on a checkbox value

Question

I am developing an Angular app where i use check boxes in a formgroup. I have second form group with multuiple text inputs. I want to enable the selected text input in the second form when particular check box in other form is enabled.

FormGroup1

 <div class="list"> 
    <form [formGroup] = "f1FormGroup" (ngSubmit)="f1(f1FormGroup.value)" #form1 = "ngForm" >
        <h2>i1</h2>
        <h5> <input type="checkbox" name="i1" value="i1" [(ngModel)]="i1.isChecked" > i1 </h5>
        <h5><input type="checkbox" name="i2" value="i2" [(ngModel)]="i2.isChecked" > i2  </h5>
    </form>
</div>

FormGroup2

<div id="i1m" class="modal">
    <!-- Modal content -->
        <div  class="col-sm-5">
            <span class="close" (click) = "close1()">&times;</span>
            <h2>RV</h2>  
            <form class="st" [formGroup] = "i1mFormGroup">  
                <h6>Material</h6>
                <input type="text" id="m1" placeholder="Optional" name="m1" value="m1">
                <h6>TC</h6>
            <select matNativeControl required>
                <option value="1">C</option>
                <option value="2">H</option>
                <option value="2">S</option>
            </select>
            <h6>SH</h6>
            <input type="text" id="m2" placeholder="1" disabled>
            <button mat-button type="submit" (click) = "save1()">Save</button> 
        </form>     
    </div> 
</div>

component.ts

t1(i1){
    if(this.i1.isChecked){
        document.getElementById("i1m").style.display = "block";
    } else{

        document.getElementById("i1m").style.display = "none";
    }
}

close1(){
    document.getElementById("i1m").style.display = "none";
}

save1(){
    document.getElementById("i1m").style.display = "none";
}

I want to enable the textbox in formgroup2 with id m2 only when the check box i2 in formgroup1 is checked and display formgroup2 with m2 textbox.if i1 is checked the formgroup2 should be displayed without m2 textbox. please guide me through this. Thanks in advance.

Edit: my i1FormGroup(FormGroup2) is a a pop up modal which pop up for each checkbox checked in f1FormGroup(FormGroup1) individually. Based on the checkbox checked the inputs are enabled or disabled. The other input values remain same when entered once.

I added a StackBlitz and explained briefly in the comments in the App.components.ts page at the bottom. Please check it. StackBlitz

...you should use a different approach. Means... don't use the DOM API! Use bindings! You also can access formControls through the form API... — Okto
– Okto, Commented Sep 9, 2019 at 11:43
Hi Okyo, Thanks for your time. can you please elaborate or provide an example. Thanks. — ram kris
– ram kris, Commented Sep 9, 2019 at 11:54
If you add a stackblitz we could make some changed there directly — MoxxiManagarm
– MoxxiManagarm, Commented Sep 9, 2019 at 12:07
Hi @MoxxiManagarm i added StackBlitz can you please check it. — ram kris
– ram kris, Commented Sep 10, 2019 at 7:37

AVJT82 · Accepted Answer · 2019-09-09 12:17:47Z

3

First of all. Don't use ngModel with reactive forms. Secondly, don't manipulate the DOM. Angular usually have own tools for doing what you want. In this case, I've gone all reactive, and based on the checkbox status, you can call disable() or enable() on the formcontrols. Here is a sample:

constructor(private fb: FormBuilder) {
  // form with checkboxes
  this.f1FormGroup = this.fb.group({
    cb1: [false],
    cb2: [false]
  })

  // form with inputs
  this.i1mFormGroup = this.fb.group({
    inp1: [''],
    inp2: ['']
  })

  // listen to the changes of the checkboxes and disable/enable when wanted
  this.f1FormGroup.valueChanges.subscribe((value) => {
    value.cb1 ? this.i1mFormGroup.get('inp1').disable() : this.i1mFormGroup.get('inp1').enable()
  })
}

Also then add formControlName to the template, and remove ngModel.

Here's a demo: StackBlitz

answered Sep 9, 2019 at 12:17

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

6 Comments

ram kris Over a year ago

Hi AJT_82, Thanks for your time. It works perfect but my i1FormGroup is a a pop up modal which pop up for each checkbox checked in f1FormGroup individually. Based on the checkbox checked the inputs are enabled or disabled.

AVJT82 Over a year ago

Please could you create a stackblitz for this and I'd be happy to take a look!

ram kris Over a year ago

Hi, I have created a stackblitz with your example. can you please have a look at it. I have explained the problem clearly in the bottom of app.component.ts. StackBlitz

AVJT82 Over a year ago

okay, I'll take a look. So do you want to actually hide or disable the fields based on your conditions? I suddenly became a bit confused on how you want it done :)

AVJT82 Over a year ago

@ramkris, check this: stackblitz.com/edit/angular-y9ws4z?file=src/app/…

|

Collectives™ on Stack Overflow

enable/disable an input form field based on a checkbox value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related