We are working with PrimeNG and angular 15. Scenarios: As per requirement we need to disable the primeNG dropdown control based on the selection. Problem: The disabled property of <p.dropdown> was not working as expected. If we pass disbaled:true actually the dropdown should be get disabled. But in my case it is not getting disabled. Explanation: We created one dropdown reusable component with one input property as per client requirement using PrimeNG control<p.dropdown>. show-dropdown.component.html <p-dropdown [disabled]="disable”>Value</p-dropdown> Show-dropdown.component.ts import {Input,OnInit,Output,} from '@angular/core'; @Component({ selector: 'app-show-dropdown', templateUrl: './show-dropdown.component.html', styleUrls: ['./show-dropdown.component.scss'], }) export class ShowDropdownComponent implements OnInit { @Input() disabled: boolean } We reused this "show-dropdown" in another component as below. Display-dropdown.component.html <app-show-dropdown [disabled]="true"></app-show-dropdown> When i try to run the application the dropdown is working fine. But the disabled property is not working as expected. It is showing following message in browser console. It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors. Example: // Specify the `disabled` property at control creation time: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) }); // Controls can also be enabled/disabled after creation: form.get('first')?.enable(); form.get('last')?.disable(); I tried to resolved it by using [attr.disabled] as parameter. still the issue is coming. Request for suggestions how to resolve this issue. Continue reading...
