What is the best way to set default values for an array in Angular when the data is loaded dynamically?

Question

What is the best way to set default values for an array in Angular when the data is loaded dynamically?

I have an Array named 'habits' that looks like this: https://i.sstatic.net/x3aYz.png

I am displaying it in a table with radio buttons for yes and no options.

https://i.sstatic.net/iAsqO.png

 <tr *ngFor="let habits of masterDate.data.habits; index as x">
    <th class="tbl-border-right-bottom text-wrap" style="width: 50%">
        {{ habits.name }}
        <div hidden="true">
            <input type="text" formControlName="habitsSufferedMainId{{ x }}" />
        </div>
    </th>
    <td class="tbl-border-right-bottom">
        <div class="col-md-6">
            <div class="form-group d-flex justify-content-around pr-2">
                <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="habitsSufferedMain{{ x }}" value="1" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" />
                    <label class="custom-control-label" for="habitsSufferedMain{{ x }}">Yes</label>
                </div>
                <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="isMainHabitNo{{ x }}" value="0" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" [checked]="true" />
                    <label class="custom-control-label" for="isMainHabitNo{{ x }}">No</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <textarea placeholder="If 'Yes', please provide details" class="form-control form-control-sm" rows="2" formControlName="habitsSufferedMainReason{{ x }}"></textarea>
        </div>
    </td>
 </tr>

Does anyone know how to set the default value to "No"?

angular typescript radio-button radio-group

Answer 1

Answer №1

Start by creating a map to hold the outcomes

const results = new Map<number, boolean>();

To initialize the checkbox value, use FormControl()

 const habitOne = new FormControl(false);
 results['habitOne'].set(false);

Next, observe changes in the value and store them in the map

habitOne.valueChanges.subscribe(value => {
    results.set('habitOne', value)
})

If you prefer, utilize a loop with FormBuilder (ensure all inputs are within a reactive form <form [formGroup]=form>)

form: FormGroup;

constructor(private fb: FormBuilder) {
    this.form = this.fb.group(
      this.habits.reduce((controls, habit, index) => {
        this.results.set(index, false)
        return {
        ...controls,
        [`habit${index}`]: new FormControl(false)
      }
    }, {}));

    Object.keys(this.form.controls).forEach((control, index) => {
        control.valueChanges.subscribe(value => {
            this.results.set(index, value == true)
        })
    }
  }

Answer 2

Start by creating a map to hold the outcomes

const results = new Map<number, boolean>();

To initialize the checkbox value, use FormControl()

 const habitOne = new FormControl(false);
 results['habitOne'].set(false);

Next, observe changes in the value and store them in the map

habitOne.valueChanges.subscribe(value => {
    results.set('habitOne', value)
})

If you prefer, utilize a loop with FormBuilder (ensure all inputs are within a reactive form <form [formGroup]=form>)

form: FormGroup;

constructor(private fb: FormBuilder) {
    this.form = this.fb.group(
      this.habits.reduce((controls, habit, index) => {
        this.results.set(index, false)
        return {
        ...controls,
        [`habit${index}`]: new FormControl(false)
      }
    }, {}));

    Object.keys(this.form.controls).forEach((control, index) => {
        control.valueChanges.subscribe(value => {
            this.results.set(index, value == true)
        })
    }
  }

What is the best way to set default values for an array in Angular when the data is loaded dynamically?

Answer №1

Similar questions

Using React with Typescript: What is the best way to implement useMemo for managing a checkbox value?

Is there a way to prompt the browser's default handler to execute prior to the event propagation?

Resolving undefined in Ionic 4: Returning Data from Modal

Tips for downloading a file using an AWS Lambda function in Python

What steps can be taken to ensure that the requestAnimationFrame function does not redraw the canvas multiple times after a button click?

retrieving information from an array of objects within a nested JSON array

Exploring Angular: How to access ViewChild from a dynamically loaded component

Need help with resetting a value in an array when a button is clicked?

When working with Laravel and submitting a form using the `multipart/form-data` encoding type, you may encounter the

Reactive form utilizing Angular template

I encountered an issue while trying to view an image using ionic-img-viewer - the error that came up was "Module not found: rxjs/operators

The 'subscribe' property is not recognized on the 'void' type

Creating an image tag in Angular4 using data retrieved from an API_RESPONSE

When a reusable component that utilizes ControlValueAccessor is modified programmatically, it triggers the onChange event

What causes the generation of an outdated object when utilizing the let and new keywords to create a new object within a service function?

Puppeteer occasionally fails to execute clicks

How can I apply concatMap in Angular?

Looping through an array using NgFor within an object

Encountering "Undefined error" while using @ViewChildren in Angular Typescript

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?