primeng 15 and Angular 15 - disabled attr for Reactive Forms doesn't work

[silveoj]

Describe the bug

I tested my code in stackblitz examples from documentation (examples for Angular 13 and primeng 13). It works. For example it based on https://stackblitz.com/edit/primeng-inputswitch-demo?file=README.md

Issue: [disabled]="true" doesn't work in inputSwitch, radioButton, toggleButton, etc (I think in all components) if I use reactive forms. But for ngModel is fine.

Fro example I want to disable only one radio from group

package.json

{
  "name": "angular-tour-of-heroes",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port=4406",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "primeicons": "^6.0.1",
    "primeng": "^15.0.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.5",
    "@angular/cli": "~15.0.5",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.2"
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { InputSwitchModule } from 'primeng/inputswitch';
import { RadioButtonModule } from 'primeng/radiobutton';
import { ToggleButtonModule } from 'primeng/togglebutton';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    InputSwitchModule,
    RadioButtonModule,
    ToggleButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit { 
  public form: FormGroup = new FormGroup({});

  checked2: boolean = true;

  constructor(
    private formBuilder: FormBuilder,
  ) {  }

  public ngOnInit() {
    this.form = this.formBuilder.group({
      switch: true,
      radio: 'val1',
      toggle: 'val1',
    });
  }
}

app.component.html

<h5>Reactive</h5>
<div [formGroup]="form">
    <p-inputSwitch formControlName="switch" label="switch" [disabled]="true"></p-inputSwitch>

    <p-radioButton
        formControlName="radio"
        label="radio"
        value="val1"
    ></p-radioButton>
    <p-radioButton
        formControlName="radio"
        label="radio"
        value="val2"
        [disabled]="true"
    ></p-radioButton>

    <p-toggleButton formControlName="toggle" [disabled]="true"></p-toggleButton>
</div>

<h5>Model Driven</h5>
<p-inputSwitch [(ngModel)]="checked2" [disabled]="true"></p-inputSwitch>

Environment

win 10

Reproducer

No response

Angular version

15.*

PrimeNG version

15.*

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

14.20.1

Browser(s)

any

Steps to reproduce the behavior

1. Download Angular 15 any official example.
2. Replace 4 files from with my content: package.json, app.module.ts, app.component.ts, app.component.html.
3. npm i
4. Run
5. Result: I can change/click value of all Reactive controls

Expected behavior

I can't change/click value of all Reactive controls in Angular 15 + primeng 15

[critchie]

Try setting disabled when building your form group:

this.form = this.formBuilder.group({ switch: { value: true, disabled: true }, radio: 'val1', toggle: 'val1', });

I don't use the formBuilder so the syntax may not be perfect. You shouldn't need the [disabled] attribute.

[volvachev]

Hi @silveoj you should change the

ReactiveFormModule

to

ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'})

• this has changed since 15 angular

[silveoj]

@critchie It will works for all radioinput. Sorry, I provided simple example.

@volvachev Thanks. It works. Sorry for interruption. I didn't check pure angular.

[miki995]

@cetincakiroglu @mehmetcetin01140 Any plans to solve this issue?

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles: