Struggling with Angular's UI not refreshing when the model is updated

Question

Struggling with Angular's UI not refreshing when the model is updated

I am encountering an issue with the UI update on my Radiobox group.

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options.value' (ngModelChange)="selectionChanged($event)" type="radio" name="dateOptions"
           [(ngModel)]="selectedOption">
    <label class="mr-3">
        {{options.displayText}}
    </label>
</div>

The binding is functioning well. My component extends ControlValueAccessor and when the selectedOption is updated as follows:

writeValue(dateId: DateIds): void {
    const matchingOption = this.dateOptions.find((option) => equal(option.id, dateId))
    this.selectedOption= matchingOption ? matchingOption.value : this.selectedOption
    this.selectionChanged(this.selectedOption)
  }

The value of selectedOption is set correctly, but the UI only updates when I interact with the component. It doesn't have to be changing the selection; even opening my datepicker is enough for the UI to refresh.

According to the documentation, the UI should change when selectedOption changes to match the value.

angular typescript ngmodel controlvalueaccessor

Answer 1

Answer №1

Upon testing on my end, your idea functions as intended. There might be an element in your code causing interference with the update process.

Here is my scenario: After 10 seconds, the value of selectedOption is altered. In this case, radio button 1 loses its selection and 3 becomes selected without any additional interaction.

**HTML**

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options' 
        (ngModelChange)="selectionChanged($event)" 
        type="radio" name="dateOptions"
        [(ngModel)]="selectedOption">
        <label class="mr-3">
            {{options}}
        </label>
 </div>

TS

dateOptions = ['date1', 'date2', 'date3'];
selectedOption = 'date1';


constructor() {
    setTimeout(() => {
        this.selectedOption = 'date3';
        console.log('changed');
    }, 10000);
}

Answer 2

Upon testing on my end, your idea functions as intended. There might be an element in your code causing interference with the update process.

Here is my scenario: After 10 seconds, the value of selectedOption is altered. In this case, radio button 1 loses its selection and 3 becomes selected without any additional interaction.

**HTML**

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options' 
        (ngModelChange)="selectionChanged($event)" 
        type="radio" name="dateOptions"
        [(ngModel)]="selectedOption">
        <label class="mr-3">
            {{options}}
        </label>
 </div>

TS

dateOptions = ['date1', 'date2', 'date3'];
selectedOption = 'date1';


constructor() {
    setTimeout(() => {
        this.selectedOption = 'date3';
        console.log('changed');
    }, 10000);
}

Struggling with Angular's UI not refreshing when the model is updated

Answer №1

Similar questions

Dependency injection in Angular 2 service not functioning as expected

typescript handling a supposedly optional property that is not truly optional

Encountering Issue: NG0303 - Unable to associate 'ng-If' as it is not recognized as a valid attribute of 'app-grocery'

Troubleshooting a NextJs/TS problem with importing ESM modules

updating firebase data using Angular

Issues with the functionality of Angular and Material's multi-level menu and breadcrumb integration

Angular, manipulating components through class references instead of creating or destroying them

TypeScript Library encounters issues when importing a specific data type

Error encountered while rendering content in an Angular template

Function that returns an Observable

Leveraging TypeScript's "this" keyword within an interface

Creating an object in just 2 steps that adheres to an interface - here's how!

Endless cycle occurs when attempting to login to KeyCloak

Steps for deploying an Angular 2 application without the need for a server

Checking for Webpack has begun in a separate process - not found

Encountering a problem with the Material UI Autocomplete component when trying to implement

Integrating fresh components into a JSON structure

Designing a contact form using Angular and Firebase

Typescript Error: The object doesn't recognize the property 'files' as part of the HTMLElement type

Leveraging the Power of JavaScript within Angular 12