【问题标题】:Disable p-dropdown depending selection of another p-dropdown PrimeNG根据选择另一个 p-dropdown PrimeNG 禁用 p-dropdown
【发布时间】:2018-09-15 07:21:21
【问题描述】:

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

问题

我有两个用于 country 和 caste_category 的下拉菜单,我只为 India 提供 caste_reservation ,如果选择其他国家/地区,则需要选择 caste_category 中的 OPEN 选项并禁用该下拉菜单。

【问题讨论】:

    标签: angular5 primeng primeng-dropdowns


    【解决方案1】:

    如果您使用指令表单控件,您可以通过在表单控件中添加 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)
      });
    

    【讨论】:

      【解决方案2】:

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

      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

      这是你要找的吗?

      【讨论】:

      • 感谢您的快速帮助,我只是测试并返回这里
      • 嘿@Antikhippe 我需要的正是你发布的,只是我的数据来自 apis。你的解决方案有效,谢谢,你的努力真的很感激,再次感谢。
      • 我的荣幸! :)
      猜你喜欢
      • 2018-02-19
      • 2019-11-11
      • 1970-01-01
      • 1970-01-01
      • 2016-11-01
      • 2018-08-28
      • 2021-01-07
      • 2019-01-02
      • 2022-08-21
      相关资源
      最近更新 更多