Setting checkbox values using patchValue in Angular programming

Question

Setting checkbox values using patchValue in Angular programming

I'm facing an issue with reusing my create-form to edit the form values. The checkbox works fine when creating a form, but when I try to edit the form, the values don't get updated on the checkbox. Below is the code snippet that I have been working on:

<div class="form-row">
  <div class="form-group col-sm-6">
    <label>Authorized To</label>
    <br>
    <label *ngFor="let choice of authorized; let i=index">
      <input type="checkbox" [value]="choice" (change)="onCheckChange($event)" [checked]="checkedVal"
          formArrayName="authorized" type="checkbox[class.invalid]="! formGrowLicense.controls['authorized'].valid && formGrowLicense.controls['authorized'].touched ">
                            {{choice}}
     </label>
    <div *ngIf="!formGrowLicense.controls['authorized'].valid && (formGrowLicense.controls['authorized'].touched || isSubmitted)">
      <div class="invalid-feedback" style="display: block;">Please enter authorized to</div>
    </div>

  </div>
</div>

TypeScript

authorized: any = ['CULTIVATE', 'HARVEST', 'PROCESS']; //displaying list of checkboxes
constructor() {
  this.formGrowLicense = this.formBuilder.group({
      businessName: ['', Validators.required], 
      authorized: new FormArray([], [Validators.required])
       });
   } 
 getGrowLicense(id) {
    this.httpService.getGrowLicenseById(id).subscribe(
      response => {
        this.patchGrowLicense(response);
        this.checkedVal = response.authorisedTo; // storing response in this variable ['CULTIVATE','HARVEST']
      },

      (err: any) => console.log(err)
    );
  }
patch(licenseObj){
    this.formGrowLicense.patchValue({
      businessName:licenseObj.companyName,
      authorized: licenseObj.authorisedTo, // patch these two values as checked in checkboxes
      });
    }

 onCheckChange(event) {
    this.formArray = this.formGrowLicense.get(
      'authorized'
    ) as FormArray;

    /* Selected */
    if (event.target.checked) {
      console.log(event.target.value);
      // Add a new control in the arrayForm
      this.formArray.push(new FormControl(event.target.value));
    } else {
      /* unselected */
      // find and remove the unselected element
      let i = 0;

      this.formArray.controls.forEach((ctrl: FormControl) => {
        if (ctrl.value == event.target.value) {
          this.formArray.removeAt(i);
          return;
        }

        i++;
      });
    }
  }

angular typescript

Answer 1

Answer №1

There is a FormArray of FormControls that accepts values true/false and an array of strings within a fixed array. The first step is to transform the received array into an array of true/false values.

Initial Method

To begin, we will create a Form with a formArray. In order to manage a form array effectively, we need to create a getter that returns our formArray.

//our getter formArray
get authorizedArray()
{
    return this.formGrowLicense.get('authorized') as FormArray
}

ngOnInit()
{ //we create the formArray
this.formGrowLicense=new FormGroup({
businessName:new FormControl(),
authorized:new FormArray(this.authorized.map(x=>new FormControl(false)))
})
}

Notice that the formArray is created using

new FormArray(..here and array of formControls..)

. Each element of the 'authorized' array is mapped to a FormControl to create the formArray of FormControls.

To display a series of inputs, we use the following .html structure:

<form [formGroup]="formGrowLicense">
<input formControlName="businessName">
<!--we use formArrayName in a div-->
<div formArrayName="authorized">
<!--we iterate over autorizedArray.controls
remember our formArray getter function? -->
<div *ngFor="let control of authorizedArray.controls; let i=index">
<label><input type="checkbox" [formControlName]="i">{{authorized[i]}}</label>
</div>
</div>
</form>

We iterate over the formArrayControls and use the index to display the value of authorized[i] in the label.

Next step would be feeding the formArray with values when data is received. For example:

{
businessName:'my business name'
authorized:['CULTIVATE', 'PROCESS']
}

When receiving the data, we can do something like this:

this.formGroupLicense.patchValue(
{
businessName: data.businessName,
authorized: this.authorized.map(x=>data.authorized.indexOf(x) >=0)
}
)

This code snippet transforms the 'data.authorize' array (with 0, 1, 2, or 3 elements) into a new array of 3 elements containing only true/false values.

Lastly, in the submit function, we convert the [true,false,false] values to an array of strings:

submit(form)
{
if (form.valid)
{
const data={
businessName: form.value.businessName,
authorize: form.value.authorized.map(
(x, index)=>x?this.authorized[index]:null)
.filter(x=>x)
}
console.log(data) //Here we have the data to send to the service
}
}

We map [true,false,false] to ['CULTIVATE', null, null] and filter out elements that are null, resulting in ['CULTIVATE'].

Instead of using patchValue every time, we can create a function that generates a formGroup with the desired data:

createFormGroup(data:any=null)
{
data=data||{businessName:null, authorize:[]}
return new FormGroup({
businessName: new FormControl(data.businessName),
authorized: new FormArray(this.authorized.map(x=>new FormControl(data.authorized.indexOf(x)>=0)))
})
}

So, when data is received, we simply call:

this.formGroupLicense = this.createFormGroup(data)

Alternate Method

In this approach, we have a form structured like:

this.formGrowLicense=new FormGroup({
businessName:new FormControl(),
authorized:new FormControl()
})

YES! 'authorized' is a FormControl that stores an array. We can achieve a similar functionality to Material multi-select checkboxes using this method. Check out this link for more information about custom formControl usage.

An auxiliary array with 'name' and 'value' properties is used for demonstrating purposes:

authorizedAux: any = [{name:'CULTIVATE', value:true}, 
{name:'HARVEST', value:false},
{name:'PROCESS', value:true}]

We define two functions - setAuthorized() and parse() to handle the changes in FormControl values:

setAutorized(data: string[]) {
this.authorizedAux = this.authorized.map(x => ({
name: x,
value: data.indexOf(x) >= 0
}));
}

parse() {
const result=this.authorized
.map((x, index) => (this.authorizedAux[index].value ? x : null))
.filter(x => x);
return result.length > 0 ? result : null
}

The implementation in HTML involves using ngModel, ngModelChange, and ngModelOptions:

<form [formGroup]="form">
<input formControlName="businessName">
<div *ngFor="let control of authorizedAux">
<label>
<input type="checkbox"  
[ngModel]="control.value"
(ngModelChange)="control.value=$event; form.get('authorized').setValue(parse())"
[ngModelOptions]="{standalone:true}"
>{{control.name}}</label>
</div>
</form>

Remember to call setAuthorized() when receiving new data. Both approaches can be viewed in this Stackblitz link!

Answer 2

There is a FormArray of FormControls that accepts values true/false and an array of strings within a fixed array. The first step is to transform the received array into an array of true/false values.

Initial Method

To begin, we will create a Form with a formArray. In order to manage a form array effectively, we need to create a getter that returns our formArray.

//our getter formArray
get authorizedArray()
{
    return this.formGrowLicense.get('authorized') as FormArray
}

ngOnInit()
{ //we create the formArray
this.formGrowLicense=new FormGroup({
businessName:new FormControl(),
authorized:new FormArray(this.authorized.map(x=>new FormControl(false)))
})
}

Notice that the formArray is created using

new FormArray(..here and array of formControls..)

. Each element of the 'authorized' array is mapped to a FormControl to create the formArray of FormControls.

To display a series of inputs, we use the following .html structure:

<form [formGroup]="formGrowLicense">
<input formControlName="businessName">
<!--we use formArrayName in a div-->
<div formArrayName="authorized">
<!--we iterate over autorizedArray.controls
remember our formArray getter function? -->
<div *ngFor="let control of authorizedArray.controls; let i=index">
<label><input type="checkbox" [formControlName]="i">{{authorized[i]}}</label>
</div>
</div>
</form>

We iterate over the formArrayControls and use the index to display the value of authorized[i] in the label.

Next step would be feeding the formArray with values when data is received. For example:

{
businessName:'my business name'
authorized:['CULTIVATE', 'PROCESS']
}

When receiving the data, we can do something like this:

this.formGroupLicense.patchValue(
{
businessName: data.businessName,
authorized: this.authorized.map(x=>data.authorized.indexOf(x) >=0)
}
)

This code snippet transforms the 'data.authorize' array (with 0, 1, 2, or 3 elements) into a new array of 3 elements containing only true/false values.

Lastly, in the submit function, we convert the [true,false,false] values to an array of strings:

submit(form)
{
if (form.valid)
{
const data={
businessName: form.value.businessName,
authorize: form.value.authorized.map(
(x, index)=>x?this.authorized[index]:null)
.filter(x=>x)
}
console.log(data) //Here we have the data to send to the service
}
}

We map [true,false,false] to ['CULTIVATE', null, null] and filter out elements that are null, resulting in ['CULTIVATE'].

Instead of using patchValue every time, we can create a function that generates a formGroup with the desired data:

createFormGroup(data:any=null)
{
data=data||{businessName:null, authorize:[]}
return new FormGroup({
businessName: new FormControl(data.businessName),
authorized: new FormArray(this.authorized.map(x=>new FormControl(data.authorized.indexOf(x)>=0)))
})
}

So, when data is received, we simply call:

this.formGroupLicense = this.createFormGroup(data)

Alternate Method

In this approach, we have a form structured like:

this.formGrowLicense=new FormGroup({
businessName:new FormControl(),
authorized:new FormControl()
})

YES! 'authorized' is a FormControl that stores an array. We can achieve a similar functionality to Material multi-select checkboxes using this method. Check out this link for more information about custom formControl usage.

An auxiliary array with 'name' and 'value' properties is used for demonstrating purposes:

authorizedAux: any = [{name:'CULTIVATE', value:true}, 
{name:'HARVEST', value:false},
{name:'PROCESS', value:true}]

We define two functions - setAuthorized() and parse() to handle the changes in FormControl values:

setAutorized(data: string[]) {
this.authorizedAux = this.authorized.map(x => ({
name: x,
value: data.indexOf(x) >= 0
}));
}

parse() {
const result=this.authorized
.map((x, index) => (this.authorizedAux[index].value ? x : null))
.filter(x => x);
return result.length > 0 ? result : null
}

The implementation in HTML involves using ngModel, ngModelChange, and ngModelOptions:

<form [formGroup]="form">
<input formControlName="businessName">
<div *ngFor="let control of authorizedAux">
<label>
<input type="checkbox"  
[ngModel]="control.value"
(ngModelChange)="control.value=$event; form.get('authorized').setValue(parse())"
[ngModelOptions]="{standalone:true}"
>{{control.name}}</label>
</div>
</form>

Remember to call setAuthorized() when receiving new data. Both approaches can be viewed in this Stackblitz link!

Setting checkbox values using patchValue in Angular programming

Answer №1

Similar questions

Ensure that you are completely logged out of all browser tabs when one tab has been successfully logged out

The function item$.take cannot be found, resulting in a TypeError: "item$.take is not a function"

Properly write a function in Typescript that returns the initial property of an object

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

Typescript encounters difficulty locating the Express module

Tips for adding and verifying arrays within forms using Angular2

Transferring an array of data across different screens within an Ionic 2 application

Issues with Angular2 causing function to not run as expected

Tips for ensuring the Google Maps API script has loaded before executing a custom directive on the homepage of an Angular website

Troubles with input handling in Angular

Steps for adjusting the status of an interface key to required or optional in a dynamic manner

Learn how to dynamically enable or disable the add and remove buttons in the PrimeNG PickList using Angular 2

Guide to Automatically Updating Angular Component When Service Data Changes

What is the best way to refresh my mat-tree component without triggering a re-render?

Function modifies global variable

Encountering difficulties when attempting to start a new project in Angular

Encountering Gyp Errors During NPM Install in an Angular 5 Project

Encountering unexpected errors with Typescript while trying to implement a simple @click event in Nuxt 3 projects

Library of Functions in Angular 2

Creating synchronous behavior using promises in Javascript