We are currently utilizing PrimeNG along with Angular 15.
Scenarios: According to the requirements, we need the ability to disable the PrimeNG dropdown control based on a selection.
Problem: The disabled property of <p.dropdown> is not functioning as expected. Even when passing disabled:true, the dropdown remains enabled instead of being disabled.
Explanation: We have developed a reusable dropdown component with an input property using the PrimeNG control<p.dropdown> to meet client specifications.
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 then used this "show-dropdown" component in another component as shown below.
Display-dropdown.component.html
<app-show-dropdown [disabled]="true"></app-show-dropdown>
When running the application, the dropdown functions correctly. However, the disabled property does not work as intended.
The browser console displays the following message:
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();
Even after attempting to use [attr.disabled] as a parameter to address the issue, it still persists.
Seeking suggestions on how to successfully resolve this problem.