動態禁用反應形式的下拉菜單

Question

我正在嘗試禁用使用 ul 和 li 構建的下拉列表，我必須使用 ui 和 li 而不是 select 來滿足反應形式內的要求。

Html

<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
     <li class="bx--dropdown-text">Validation type</li>
     <li>
       <ul class="bx--dropdown-list">
        <li data-option [attr.data-value]="input" class="bx--dropdown-item"   *ngFor="let input of validationTypes;">
         <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">{{input}}</a>
        </li>
      </ul>
   </li>
</ul>

ts

let fieldSetGroup = <FormArray>this.createTemplateForm.get("fieldSets");
        fieldSetGroup.push(this.fb.group({
            key: ["", Validators.required],
            "type": ["", Validators.required],
            mandatory : ["", Validators.required],
            validationType: [""]
}));
let fg  = <FormGroup> fieldSetGroup.controls[id];
if (fg.controls["key"] === "Apple") {
  fg.controls["validationType"].disable();
}

嘗試在 ul 和 li 上添加 formControlName ...沒有工作...如何處理這種情況？

Answer 1

您有 2 個選項，要么使用反應形式，要么使用 css class

使用響應式表單將formControlname添加到您的組件

<ul data-dropdown data-value class="bx--dropdown" tabindex="0" formControlName="validationType">
     <li class="bx--dropdown-text">Validation type</li>
     <li>
       <ul class="bx--dropdown-list">
        <li data-option [attr.data-value]="input" class="bx--dropdown-item"   *ngFor="let input of validationTypes;">
         <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">{{input}}</a>
        </li>
      </ul>
   </li>
</ul>

並在您的方法中添加以下代碼（您想要禁用它的地方）

const ctrl = this.fg.get('validationType');
  ctrl.disable();

使用 css 來實現這一點
將此添加到您的組件中 css

.disabled{
    pointer-events:none;
    opacity:0.4;
  }

並在您的 html 中將此 calss 添加到您的元素

 <ul data-dropdown data-value class="bx--dropdown" tabindex="0" [class.disabled]="fg.invalid">
     <li class="bx--dropdown-text">Validation type</li>
     <li>
       <ul class="bx--dropdown-list">
        <li data-option [attr.data-value]="input" class="bx--dropdown-item"   *ngFor="let input of validationTypes;">
         <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">{{input}}</a>
        </li>
      </ul>
   </li>
</ul>

請用您的驗證條件替換fg.invalid