CODEWITHSUNDEEP
angularformscheckbox
Doe
Doe

Reputation: 163

Angular - Check/Uncheck All Checkboxes

my job is to do the following functionality. I have 3 checkboxes and after selecting one I want the other two to also be selected.

I use a ready-made component to create the checkbox.

<form [formGroup]="data" name="name" >
  <div class="form-group">
    <div class="form__element">
      <nb-checkbox name="groupname" value="Check All" label="Check All" formControlName="isAgree" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"></nb-checkbox>
    </div>
  </div>

  <div class="features__box">
    <section class="agreements">
          <ul class="features__list">
        <li class="features__item" *ngFor="let agreement of data.agreements.value">
          <div class="form__element">
            <nb-checkbox name="groupname" value={{agreement.description}} label={{agreement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
          </div>
        </li>
      </ul>
    </section>
    <section class="statements">
          <ul class="features__list">
        <li class="features__item" *ngFor="let statement of data.statements.value">
          <div class="form__element">
            <nb-checkbox name="groupname" value={{statement.description}} label={{statement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
          </div>
        </li>
      </ul>
    </section>
  </div>
</form>

I added [(ngModel)] =" myVar2 "[ngModelOptions] =" {standalone: true} " to my main checkbox, and I added [checked] =" myVar2 "(change) =" myVar2 =! myVar2 to my next checkbox. In the file.component.ts file I addedmyVar2: boolean = false;

However, the above solution does not work. I get the following errors in the console

    
    ERROR in src/app/file.component.html:64:66 - error NG8002: Can't bind to 'ngModelOptions' since
it isn't a known property of 'nb-checkbox'.
    1. If 'nb-checkbox' is an Angular component and it has 'ngModelOptions' input, then verify that it is part of this module.
    2. If 'nb-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
    
    64                   formControlName="isAgree" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"></nb-checkbox>
                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
      src/app/file.component.ts:14:16
        14   templateUrl: './file.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component CeidgPositiveComponent.
    src/app/file.component.html:94:121 - error NG8002: Can't bind to 'checked' since it isn't a known property of 'nb-checkbox'.
    1. If 'nb-checkbox' is an Angular component and it has 'checked' input, then verify that it is part of this module.
    2. If 'nb-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
    
    94                     <nb-checkbox name="groupname" value={{statement.description}} label={{statement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
                                                                                                                               ~~~~~~~~~~~~~~~~~~
    
      src/app/file.component.ts:14:16
        14   templateUrl: './file.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component File.

I have imported modules import {FormsModule, ReactiveFormsModule} from '@ angular / forms'; import {NgxsModule} from '@ ngxs / store';

Does anyone know how to solve this problem?

Upvotes: 1

Views: 13653

Answers (1)

Kamran Khatti
Kamran Khatti

Reputation: 4127

Updating my answer as per our discussion in comments, to check/uncheck all checkboxes.

component.ts

checklist

checkUncheckAll(evt) {
  this.checklist.forEach((c) => c.isSelected = evt.target.checked)
}

ngOnInit() {
this.checklist = [
    {id:1,value:'Elenor Anderson',isSelected:false},
    {id:2,value:'Caden Kunze',isSelected:false},
    {id:3,value:'Ms. Hortense Zulauf',isSelected:false},
    {id:4,value:'Grady Reichert',isSelected:false},
    {id:5,value:'Dejon Olson',isSelected:false},
    {id:6,value:'Jamir Pfannerstill',isSelected:false},
    {id:7,value:'Aracely Renner DVM',isSelected:false},
    {id:8,value:'Genoveva Luettgen',isSelected:false}
  ];
}

In your template

<div class="container">
  <div class="text-center mt-5">
    <div class="row">
       <div class="col-md-6">
        <ul class="list-group">
            <li class="list-group-item">
              <input type="checkbox" name="list_name" value="m1" (change)="checkUncheckAll($event)"/> <strong>Select/ Unselect All</strong>
            </li>
          </ul>
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let item of checklist">
              <input type="checkbox" [checked]="item.isSelected" name="list_name" value="{{item.id}}"/>
              {{item.value}}
            </li>
          </ul>
      </div>
   </div>
 </div>
</div>

Working DEMO

Upvotes: 1

Related Questions