I can't run 2 checkboxes that I created with Angular asynchronously

Issue

I have 2 checkboxes, and when I click on one of them it should be "true" and the other "false" so if one is checked, the other must be unchecked. I shouldn't be able to check both at the same time.

      <div class="export-content">
        <input style="margin-right: 5px;" type="checkbox" value="1" [(ngModel)]="dataModal.analysis">
        <span>{{'EXPORTER.analysis' | translate}} </span>
      </div>
      <div class="export-content">
        <input style="margin-right: 5px;" type="checkbox" value="2" [(ngModel)]="dataModal.pressAnalysis">
        <span>{{'EXPORTER.pressAnalysis' | translate}} </span>
      </div>

   <button type="button" class="btn btn-sm btn-outline-primary" (click)="selectedDocumentsExpoertClick()">
      Print
  </button> 

this part is my html code.

and this part is my ts code;

selectedDocumentsExpoertClick() {
    if (this.dataModal.analysis) {
       print details...
}
if (this.dataModal.pressAnalysis) {
  print details...
}

Solution

I have 2 checkboxes, and when I click on one of them it should be "true" and the other "false"

To get the exact behavior you should use radio button instead of checkbox. Check box is used to select several values ​​so when you click on a box the others will continue with the previous values.

1. Add imports to use reactive form to app.module.ts

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule, <---
    ReactiveFormsModule, <---
    ....
  ])

2. initialize the form in the component

    import { FormControl, FormGroup } from '@angular/forms';
    
    ......
    export class YourComponent implements OnInit {
         public form: FormGroup = new FormGroup({
                typeAnalysi:new FormControl('option1') //Option selected by default
         });
       ....

       onAnalysiSelected(typeAnalysi:string){
          console.log(typeAnalysi)
       }

       onSubmit(formValue:any){
          console.log(formValue)
       }
    }

3. Add form to your HTML your.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div>
  <label for="typeAnalysi">Type Analysis</label>
  <div>
    <label for="option1">
      Option 1
      <input (ngModelChange)="onAnalysiSelected(form.controls['typeAnalysi'].value)" id="option1" type="radio" name="typeAnalysi" formControlName="typeAnalysi" value="option1">
    </label>
    <label for="option2">
      Option 2
      <input (ngModelChange)="onAnalysiSelected(form.controls['typeAnalysi'].value)" id="option2" type="radio" name="typeAnalysi" formControlName="typeAnalysi" value="option2" />
    </label>
  </div>
</div>
</form>

Answered By - Bacar Pereira