Question

我正在尝试禁用使用ul和li构建的下拉菜单，我必须使用ui和li而不是在反应形式中选择需求。

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类

要使用反应式，请将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;
  }

，然后在ur 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

动态禁用反应形式的下拉菜单

1 个答案: