angular5 - 根据选择另一个 p-dropdown PrimeNG 禁用 p-dropdown

Question

我在我的 Angular 应用程序中使用 PrimeNG，我遇到了 p-dropdown 的问题

问题

我有两个用于国家和种姓类别的下拉菜单，我只为印度提供种姓保留，如果选择其他国家，则需要选择种姓类别的 OPEN 选项并禁用该下拉菜单。

Answer 1

如果我充分了解您的需求，您必须onChange在国家下拉列表中设置事件。此事件将调用一个方法，该方法将disabled根据所选国家/地区触发种姓下拉属性。如果国家/地区不是印度，它还将在此下拉列表中选择“打开”选项。

HTML

<p-dropdown [options]="countries" [(ngModel)]="applicant.country" (onChange)="updateCountry()"></p-dropdown>

<p-dropdown [options]="castes" [(ngModel)]="caste" [disabled]="disableCasteDropdown"></p-dropdown>

TS

updateCountry() {
     if(this.applicant.country!=='India') {
       this.disableCasteDropdown = true;
       this.caste = 'o';
     } else {
       this.disableCasteDropdown = false;
       this.caste = null;
     }
}

见Plunker

是你要找的吗？

Answer 2

如果您使用指令表单控件，您可以通过在表单控件中添加 disabled: true 来禁用输入、下拉列表等

在 html 中使用 disabled 属性会导致控制台中出现此消息：

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: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });