Question

我想根据以下条件禁用我的字段，但是它不起作用

 <select class="floating-select" value="" formControlName="systemId" [disabled]="loginSysId!='Admin'">
            <option *ngFor="let val of systemId" [ngValue]="val">{{val}}</option>
          </select>

如果loginSysId！=“ Admin”，则必须禁用，我是angular用户。

Answer 1

下面的

是最基本的版本。首先，然后一次添加更多的属性（添加css类，然后添加formControlName等）

可能是您的表单组在代码中启用了“ systemId”。您的“ * ngFor =“让systemId的val值”似乎没有指向数组似乎很奇怪？难道不是systemId s 吗？

        <select [disabled]="true">
            <option [value]="a">a</option>
            <option [value]="b">b</option>
            <option [value]="c">c</option>
        </select>

Answer 2

您必须使用Disabled属性并将条件放在此处。

html文件

<select [disabled]="loginSysId == 'admin'">
  <option value=1>test</option>
  <option value=2>test x2</option>
</select>

ts瓷砖

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  loginSysId = 'admin';
}

Answer 3

检查一下

您可以这样验证

组件

export class AppComponent  {

  loginSysId = 'Admin';
  items =  [

      {name:"Client"},
      {name:"Customer"},
      {name:"Admin"}
   ];

}

HTML

<select type="number">
<option [disabled]="i.name == loginSysId" *ngFor="let i of items" [ngValue]="i.name">{{i.name}}</option>

SLACKBlitz

更新1：

<select type="number" [disabled]="loginSysId == 'Admin'">
    <option [disabled]="i.name == loginSysId" *ngFor="let i of items" [ngValue]="i.name">{{i.name}}</option>
</select>

Slackblitz

根据某些条件禁用字段

3 个答案: