Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

Question

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular.

Below is the code snippet for the markup I want to make functional within the parent component:

<form>
  <my-radio [(ngModel)]="radioBoundProperty" value="1" name="myCustomRadioButton">Btn 1</my-radio><br>
  <my-radio [(ngModel)]="radioBoundProperty" value="2" name="myCustomRadioButton">Btn 1</my-radio><br>
</form>

<p>
  The current value of radioBoundProperty is:
</p>
<pre>{{radioBoundProperty|json}}</pre>

So far, I have created a custom radio component by utilizing ControlValueAccessor.

The issue arises when attempting to retrieve the selected value from my-radio component back to the parent component using ngModel for two-way data binding.

Even if I modify the value of radioBoundProperty, it overrides the values of the `value` attribute for both my-radio elements.

Click here for an updated stackblitz that demonstrates a successful example:

stackblitz showcases the functioning example with accompanying code

javascript angular typescript

Answer 1

Answer №1

Utilize the registerOnChange function to transmit the value to the parent component.

export class RadioModel implements ControlValueAccessor { 
    onChange = (val: string) => { };
    onTouched = () => { };
    onApplied = () => { };

    writeValue(val: string): void {
        // Handle changes with the writeValue function
    }

    registerOnChange(fn: (val: string) => void): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }

    valueChanged(){
         this.onChange('your value');
    }
}

Answer 2

Utilize the registerOnChange function to transmit the value to the parent component.

export class RadioModel implements ControlValueAccessor { 
    onChange = (val: string) => { };
    onTouched = () => { };
    onApplied = () => { };

    writeValue(val: string): void {
        // Handle changes with the writeValue function
    }

    registerOnChange(fn: (val: string) => void): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }

    valueChanged(){
         this.onChange('your value');
    }
}

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

Answer №1

Similar questions

Utilizing NodeJS application to connect to Sharepoint 2019 On-Premises Web Services

How to save data to a JSON file using the filesystem module in Node.js

Exploring the power of JavaScript Callback using nano and now.js

How to dynamically display a div in Vue.js depending on the attributes of another element

What is the best way to simultaneously check two conditions in Vue.js?

Ordering an array in Angular 2: A step-by-step guide

Utilizing Vue and TypeScript - Retrieving a Variable Declared in the Data() Method within Another Method

Using Angular 2, perform an HTTP GET request to retrieve data from a JSON file located in the assets folder

`Firebase User Instance and Custom Firestore Document`

Update the contents of a div element with JavaScript and PHP combo

When the function is called, it will return the global `this

What are the reasons behind the inability to import an image file in Next.js?

How can you implement WriteFile in a GET Request without causing the response to be blocked

Discovering the URL of an AJAX request on any given website

Modules that are imported in the AppModule will not be accessible in other modules

What could be causing json_decode to return NULL in this scenario?

The Angular Material Datepicker lacks any selected date

The postMessage function in my Javascript SlackBot seems to be flooding the channel with messages

Tips for handling a promise that has not been fulfilled

Tips for showcasing styled text in Vue using API data