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= label= [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= label= [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= label= [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?
Aucun commentaire:
Enregistrer un commentaire