How to initialize the value property of a radio button group in Angular?

Question

I am trying to display a text-field based on the selected value of a radio button group.

If the user selects "Yes", then I want to display the text-field. If the user selects "No", then I don't want to display this text-field.

Below is my HTML:

 <radio-button-wrapper
    [(ngModel)]="damageReported"
    name="rdoDamageReported">

    <radio
        id="preselection_damageReported_01"
        heading="Yes"
        name="validationDamageReported"
        value="Yes">
    </radio>

    <radio                          
        id="preselection_damageReported_02"
        heading="No"
        name="validationDamageReported"
        value="No"
        (click)="clearSecondCompanyFields()">
    </radio>
</radio-button-wrapper>

<div class="form-group" *ngIf="damageReported.value === 'Yes'">
    <label
        for="txtOtherCompanyName"
        class="control-label">
            Please state the name of the other insurance company:
    </label>
    <input
        class="form-control"
        id="txtOtherCompanyName"
        name="txtOtherCompanyName"
        [(ngModel)]="otherCompanyName"
        type="text"/>
</div>

In my .TS file, I have this uninitialized variable:

public damageReported;

The error message I am getting in the console is:

TypeError: _co.damageReported is undefined

I know this is because I haven't initialized damageReported in my .TS file.

But if I initialize it like so: damageReported = '';

I get this compile error when I try to use the radio button value at a later stage in the code:

this.postData(
    this.damageReported.value
)


postData(
    damageReported: string
)

Property 'value' does not exist on type 'string'.ts(2339)

Can someone please show me how I can initialize the variable while also being able to use the .value property? Thanks a lot!

take a look at this [demo](https://angular-vdq3ix.stackblitz.io) — Sarthak Aggarwal, Apr 04 '19 at 09:59
@mast3rd3mon The error isn't in the *ngIf. The error is when I'm using the radio button value in this code: `this.postData(this.damageReported.value)`. This is what's returned when I try to post when I remove `.value`: damageReported: Object { name: "validationDamageReported", value: "Yes", selectedIndex: 0 } — user7554035, Apr 04 '19 at 10:10
@user7554035 remove the `.value` on all references to `damageReported`. going by comments on an answer, you want the value of the radio set instead of the variable, in which case, you probably need to use a `@ViewChild()` — mast3rd3mon, Apr 04 '19 at 10:16

Darren Ruane · Answer 1 · 2019-04-04T10:49:11.903

0

Compiler errors are very handy pieces of information that we should try our best to listen to. In this case the compiler is telling you that the type string does not have a value property.

If you look at the docs for string instances you will see that, indeed, it has no value property.

To fix your issue, simply remove the .value such that your *ngIf directive looks like this: *ngIf="damageReported=== 'Yes'". Make sure that you also remove any usage of .value when trying to access strings in your code.

EDIT:

I believe that in combination with the above, your issue lies in your use of a third party library for your radio group/controls. The [(ngModel)] Directive is an Angular Forms Directive that relies on the decorated control having a few key details. The primary detail being the need to implement Control Value Accessor. Take a look at this and/or this post to see how this looks.

In your case, because you are using a third party library, I would suggest creating a 'wrapper' component that implements the above functionality and using that in your templates instead.

Alternatively, if you are willing to not use this third party library, and are instead happy to use Angular Material's Radio Buttons then all you need to do is the following:

Add a dependency to Angular Material in your project. If using npm: npm i @angular/material

In your ngModule import the following: import {MatRadioModule} from '@angular/material/radio';

Change your template to use Angular Material components:

<mat-radio-group [(ngModel)]="damageReported">
    <mat-radio-button value="Yes"></mat-radio-button>
    <mat-radio-button value="No"></mat-radio-button>
</mat-radio-group>

Hope that helps.

edited Apr 04 '19 at 10:49

answered Apr 04 '19 at 09:56

Darren Ruane

2,385
1
8
17

Thanks for your answer. But the error isn't in the ***ngIf**. The error is when I'm using the radio button value in this code: `this.postData(this.damageReported.value)`. – user7554035 Apr 04 '19 at 10:04
So instead of initialising the variable as an empty string. I want to know how to assign the .value property of damageReported to '' – user7554035 Apr 04 '19 at 10:05
Yes, remove the `.value`, there **is no** property on string called `value`, as my answer said. So instead, it looks like : `this.postData(this.damageReported)` – Darren Ruane Apr 04 '19 at 10:06
When I remove `.value`, now when I post the data, instead of getting the value of the **damageReported** radio button, I get an object which contains a value property: `damageReported: Object { name: "validationDamageReported", value: "Yes", selectedIndex: 0 }` – user7554035 Apr 04 '19 at 10:09
Can you please post your `postData()` method in your question? Also, you appear to be using some third party libraries or custom components for your radio group and buttons. Can you please include information about them? – Darren Ruane Apr 04 '19 at 10:18
I've posted the `postData()` method above. The library operates the same as bootstrap – user7554035 Apr 04 '19 at 10:26

How to initialize the value property of a radio button group in Angular?

1 Answers1