CODEWITHSUNDEEP
angularangular-formly
CodeMonkey
CodeMonkey

Reputation: 26

Angular Formly - Disable individual Radio Options

I'm trying to disable one Radio Button (e.g the first one) Option trough angular formly Fields.

          options: [
            {
              value: 1,
              label: 1,
            },
            {
              value: 2,
              label: 2
            },
            {
              value: 3,
              label: 3
            }
          ]

This doesn't work

                {
                  value: 1,
                  label: 1,
                  disable: 'true' //also tried true or 'disabled'
                },

I have also tried the following, unfortunately without success

        hooks: {
          onInit: (field) => {
            field.expressionProperties.options[0].disabled = true;
          }

Anyone have some ideas how can I achieve this? In HTML it would be easy to set the disabled="disabled" attribute..

Upvotes: 0

Views: 1402

Answers (2)

CodeMonkey
CodeMonkey

Reputation: 26

The problem was my outdated @ngx-formly/core Version

I updated from 5.5.1 to 5.10.1 and it works now

Upvotes: 0

ng-hobby
ng-hobby

Reputation: 2199

Generally there are two ways for that:

  1. Using [attr.disabled]
  2. Using fieldset tag
  1. Using [attr.disabled]
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled radio
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled radio
  1. Using fieldset tag
<fieldset [disabled]=true>
    <input type="radio" name="fieldsetTest" />Disable
</fieldset>

If you want control the disable\enable dynamically in your Component.ts you can try something like this:

Component.ts

options = [
          {
           value: 1,
           label: 1,
           disable: null //for 'disabled' mode
           },
           {
           value: 2,
           label: 2,
           disable: 'false' //for 'enable' mode
           },
];

Component.html

<div *ngFor="let option of options">
  <input type="radio" name="enabled" [attr.disabled]="option.disable" />
</div>

Upvotes: 1

Related Questions