angular - قادر به غیرفعال کردن منو کشویی نیست زیرا به عنوان پارامتر ورودی ارسال میشود

ما با PrimeNG و Angular 15 کار میکنیم.

سناریوها: طبق نیاز، ما باید کنترل کشویی primeNG را بر اساس انتخاب غیرفعال کنیم.

مسئله: ویژگی disabled عنصر <p.dropdown> طبق انتظار کار نمیکرد. اگر ما disbaled:true را پاس دهیم، در واقع باید منوی کشویی غیرفعال شود. اما در مورد من، غیرفعال نمیشود.

توضیح: ما یک کامپوننت کشویی قابل استفاده مجدد با یک ویژگی ورودی مطابق با نیاز مشتری با استفاده از کنترل PrimeNG <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
}

ما این «show-dropdown» را در یک مؤلفه دیگر به صورت زیر مجدداً استفاده کردیم.

Display-dropdown.component.html

<app-show-dropdown  [disabled]="true"></app-show-dropdown>

وقتی که سعی میکنم برنامه را اجرا کنم، منوی کشویی بهخوبی کار میکند. اما ویژگی غیرفعال بهطور مورد انتظار کار نمیکند.

در کنسول مرورگر پیام زیر نمایش داده میشود.

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();

من سعی کردم با استفاده از [attr.disabled] به عنوان پارامتر آن را حل کنم. هنوز هم مشکل وجود دارد.

درخواست پیشنهاداتی برای حل این مشکل.

پاسخ شماره ۱

همانطور که خطا میگوید، شما در تلاش هستید کنترل فرم را با استفاده از یک ویژگی غیرفعال کنید، که این روش برای یک فرم مبتنی بر الگو است.

برای یک فرم واکنشی، (فرمی که از دستور FormControlName استفاده میکند) باید آن را بهصورت برنامهنویسی تنظیم کنید.

this.form.get('controlName').disable();

با توجه به اینکه این با ورودی غیرفعال مرتبط است، احتمالاً باید یک تابع ngOnChanges اضافه کنید که گوش دهد و بهطور مناسب بهروزرسانی کند.

ngOnChanges(changes) {
   // Can check here to see if disabled changed, then disable or enable as needed
   this.form.get('controlName').disable();
}

همچنین شایان ذکر است که Angular یک رابط ارائه میدهد که میتوانید آن را پیادهسازی کنید به نام ControlValueAccessor هنگام ایجاد اجزای فرم سفارشی. من وارد جزئیات آن نمیشوم اما مقالات خوبی زیادی وجود دارد که ارزش خواندن دارند.

تمام آنچه گفته شد آیا باید این را در یک جزء سفارشی بپیچید، ممکن است استفاده مستقیم از منوی کشویی primeNg ساده تر باشد؟

پاسخ شماره ۲

من همان وضعیت را در کامپوننت <p-select> داشتم. سپس به صورت برنامهای آن را هنگام ایجاد کامپوننت فرم غیرفعال کردم، مانند زیر، و شروع به کار کرد:

<p-select
  [options]="processSteps"
  formControlName="processStep">
</p-select>

this.fb.group({
  processStep: new FormControl({ value: processStep, disabled: true })
});