Question

7

Toggle Angular checkbox with string values instead of boolean true/false

rated 0 times [ 14] [ 7] / answers: 1 / hits: 6304 / 2 Years ago, wed, february 16, 2022, 12:00:00

I have to create three checkboxes in my form and their values need to toggle as "optin" and "optout" (string) as I check/uncheck the checkbox. Also I need to check all the checkboxes by default for "optin" value. I cannot figure out any solution, any help would be really appreciated :( as I am fairly new to angular

Here is the code I am working on

component.html

<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">

    <div class="form-group">



   <input type="checkbox" formControlName="optOutFlag1" id="privacy" aria-labelledby="check1">

   <label for="privacy" id="check1"> Checkbox 1</label><br><br>



   <input type="checkbox" formControlName="optOutFlag2" id="security" aria-labelledby="check2">

   <label for="security" id="check2"> Checkbox 2</label><br><br>



   <input type="checkbox" formControlName="optOutFlag3" id="consent" aria-labelledby="check3">

   <label for="consent" id="check3"> Checkbox 3</label><br><br>



   <button> Submit Preference </button>



</div>

</form>

component.ts file

optOutForm:FormGroup

this.optOutForm=this.fb.group({

    optOutFlag1:["optin",Validators.required],

    optOutFlag2:["optin",Validators.required],

    optOutFlag3:["optin",Validators.required]

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyonmasonc

Add To Favorites

Follow

Total Points: 44

Total Questions: 117

Total Answers: 116

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

kenyonmasonc questions

1 React/node build error. Could not find a declaration file for module 'history'. 'node_modules/history/index.js' implicitly has an 'any' type

Thu, Feb 10, 22, 00:00, 2 Years ago

1 React js change meta tags dynamically

Mon, Dec 20, 21, 00:00, 3 Years ago

1 circle outline for fontAwesome icons in react native

Thu, Oct 8, 20, 00:00, 4 Years ago

1 NestJS Middleware Not Executed

Sun, Sep 20, 20, 00:00, 4 Years ago

1 how do I assign a returned value from an async function to a variable

Thu, Aug 20, 20, 00:00, 4 Years ago

View All

answered 2 Years ago margaritakristinak · Accepted Answer

This solution is based on the solution link by Eliseo.

The checkbox toggles values as "optin" or "optout" when checked/unchecked and is initialized as "optin" by default in .ts file

component.html file

<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">



   <div class="form-group">



   <div class="optClass">

           <input  type="checkbox" 

           [ngModel]="optOutForm.get('optOutFlag1')?.value==='optin'"

           (ngModelChange)="optOutForm.get('optOutFlag1').setValue($event?'optin':'optout')"  

           [ngModelOptions]="{standalone:true}" id="privacy">



           <label "for="privacy" id="check1">Checkbox 1</label>

  </div>



 <div class="optClass">

           <input  type="checkbox" 

           [ngModel]="optOutForm.get('optOutFlag2')?.value==='optin'"

           (ngModelChange)="optOutForm.get('optOutFlag2').setValue($event?'optin':'optout')"  

           [ngModelOptions]="{standalone:true}" id="security">



           <label "for="security" id="check1">Checkbox 2</label>

  </div>



 <div class="optClass">

           <input  type="checkbox" 

           [ngModel]="optOutForm.get('optOutFlag3')?.value==='optin'"

           (ngModelChange)="optOutForm.get('optOutFlag3').setValue($event?'optin':'optout')"  

           [ngModelOptions]="{standalone:true}" id="consent">



           <label "for="consent" id="check1">Checkbox 3</label>

  </div>

</div>

</form>

component.ts file

optOutForm:FormGroup



constructor(private fb:FormBuilder){}



ngOnInit(){

 this.optOutForm=this.fb.group({

    optOutFlag1:['optin',Validators.required],

    optOutFlag2:['optin',Validators.required],

    optOutFlag3:['optin',Validators.required]

   });

}