1

I went through Mark's solution here : Angular2, disable button if no checkbox selected but I have more than 1 array, how do I modify the code in the link?

Or anyone with any other solution for doing this? I want to do this in angularJs 2.

I have a number of classes(arrays) & a number of subjects in those classes, & each subject corresponds to a checkbox, if one or more checkboxes are selected no matter they belong to same or different class, the button should be enabled. Here's the code, right now it considers only class1:

 import {bootstrap} from 'angular2/platform/browser';

    import {Component} from 'angular2/core'

    @Component({
      selector: 'my-app',
      template: `
        <label *ngFor="let cb of class1">
          <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/>
        </label><br/>
            <label *ngFor="let cb of class6">
          <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/>
        </label>
        <p><button [disabled]="buttonState()">button</button></p>
      `
    })
    class App {

      class1 = [{label: 'English(class1-5)'},{label: 'Maths(class1-5)'}];

        class6 = [{label: 'English(class6-8)'},{label: 'Maths(class6-8)'}];


      buttonState() {

        console.log('buttonState() called');

        return !this.class1.some(_ => _.state);

      }

    }
Community
  • 1
  • 1
Himanshi Gupta
  • 171
  • 1
  • 2
  • 13

1 Answers1

0

I did not run this code, but the idea is to unite your checkboxes states to one param. In the following code I made property buttonState to store button state. I also use (ngModelChange) as event listener to call method setButtonState().I did not see "state" param in your class1/class6 arrays.

links:

ngModelChange : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

example of using: Angular 2 ngModelChange select option, grab a specific property

@Component({
  selector: 'my-app',
  template: `
<label *ngFor="let cb of  classes">
 <input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()"/>{{cb.label}}
</label>
<p><button [disabled]="buttonState">button</button></p>`
})

export class AppComponent {

  private buttonState: boolean = true;

  private classes = [{label: 'English(class1-5)', state: false},{label:  'Maths(class1-5)', state: false},
  {label: 'English(class6-8)', state: false},{label: 'Maths(class6-8)', state: false}
  ];

  setButtonState() {

    let counter = 0;
    for(let i=0;i<this.classes.length;i++) {


          if (this.classes[i].state === true) {
             counter++;
          }

      }

      if (counter >= 2) {
          this.buttonState = false;
      } else {
          this.buttonState = true;
      }
  }
}
Community
  • 1
  • 1
norweny
  • 313
  • 1
  • 3
  • 15
  • Thanks @kalininadev I ran your code here, it didn't seem to work, maybe a minor error, but I am new to angular2 & so couldn't debug... http://plnkr.co/edit/5syDqwRSV6svBtLumheG?p=preview – Himanshi Gupta Jul 06 '16 at 13:22
  • http://plnkr.co/edit/ZhuLFBMJF5ICspiOb7rc?p=preview something like that @HimanshiGupta – norweny Jul 06 '16 at 14:13
  • @HimanshiGupta Was my answer helpful for you? Have you solved the problem? – norweny Jul 07 '16 at 07:11
  • I was trying to modify your solution....I need more than one array (as each array would go in different sections of an accordion & obviously would be on the same page). So I want if any of the checkbox is checked from any section, the button should be enabled, here's the plunker : http://plnkr.co/edit/yshr4HVZ1HDloBBsp6Rt?p=preview but what I've done is not a good way... – Himanshi Gupta Jul 07 '16 at 09:50