如何在Angular 2中禁用div标签

Question

我试图在成功回调后禁用div标签。请查看我的ion-content。

<ion-content padding class="forgot-password">
  <div [ngClass]="{active: isOn,disabled: isDisabled}">
    <ion-item>
        <ion-label floating>Email/Mobile</ion-label>
        <ion-input type="text" [(ngModel)]="loginId"></ion-input>
    </ion-item> <br><br>

    <button class="float-right" (click)="generateOTP(!isOn);">Send OTP</button><br><br><br>
  </div>
  <br>

  <div *ngIf="showRePasswd">
    <ion-item>
        <ion-label floating>Enter OTP</ion-label>
        <ion-input type="text" [(ngModel)]="passwd"></ion-input>
    </ion-item> <br><br>

    <button class="float-right" (click)="resetPassword();">Send Password</button>
  </div>
</ion-content>

这是我的 .ts 文件

export class ForgotPasswordPage {

    public loginId = "";
    public passwd = "";

  public showRePasswd = false;
  isDisabled = false;
  isOn = false;

  constructor(private navCtrl: NavController, private logger: Logger, private user: Users) {

  }

  generateOTP(newstate) {
    this.logger.info("invoking generateOTP FN");
    var _this = this;
    this.user.generateOTP(this.loginId, function(result,data){
      if(result == '1') {
        alert(data);
        _this.showRePasswd = !_this.showRePasswd;
        _this.isDisabled = true;
        _this.isOn = newstate;
      }
      else {
        //this.showRePasswd = this.showRePasswd;
        alert(data);
      }
    })
  }

  resetPassword() {
    this.logger.info("invoking resetPassword FN");
    var _this = this;

    this.user.resetPassword(this.passwd, function(result,data) {
      if(result == '1') {
        alert(data);
        _this.navCtrl.push(LoginPage);
      }
      else {
        alert(data);
      }
    })
  }
}

我尝试了[ngClass]，但无法在成功回调后禁用我的

标签。

我还尝试使用[disabled]，但没有效果。

这里有一个演示来禁用

标签，但在我的情况下不起作用。

我的要求是在成功回调后将输入字段和按钮设置为禁用状态。

- Mohan Gopi

Answer 1

您可以像这样添加属性：

<div [attr.disabled]="isDisabled ? true : null">

但是<div>不支持disabled属性。

也许这就是您想要的

<div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>

使用自定义CSS可以使.isDiabled看起来像是被禁用了。

最好创建一个方法，将代码放在其中而不是内联方式。

- Günter Zöchbauer

---

我尝试过你的方法而不是使用ngClass，但我仍然可以编辑我的div标签中的输入字段。 - Mohan Gopi

div 无法被禁用（这是 HTML 的限制，而不是 Angular2 的限制）。您可以设置 disabled 属性并对其应用 CSS，或者在所有实际上可以单独禁用的子元素上设置 disabled。 - Günter Zöchbauer

你可以使用 <div>(click)="$event.preventDefault();false"</div>。 - Günter Zöchbauer

好的，我们也可以加上条件吗？比如说如果没有被禁用，(click) 调用一个方法，如果已经被禁用，使用你提到的方式。 - shanti

好的，我还将 preventDefault 更改为 stopPropagation。请参见 https://dev59.com/NVsW5IYBdhLWcg3wM02F#35274069 - Günter Zöchbauer

Answer 2

您可以在 div 标签中使用 CSS 属性 pointer-events: none;：

<ion-content padding class="forgot-password">
  <div style="pointer-events: none;">
   ...
  </div>
</ion-content>

- Lidiya Parshina

Answer 3

这是我在Angular 8项目中使用的内容： 首先像下面这样设置HTML文件。 将ngClass设置为Div标签。

<div class="col-md-3" [ngClass]="{disabledNoOfCasesDiv: !isActiveNOofCasesNo}>
<label class="control-label mb-2">No. of Cases Receive</label>
<input type="number" class="form-control" [(ngModel)]="CollectJob.NoOfCases"
placeholder="No. Cases Receive" name="NoCasesReceive">
</div>

接下来的步骤是编写禁用事件的CSS：

.disabledNoOfCasesDiv{ pointer-events: none; opacity: 2.0;}

最后：

声明变量并将其设置为布尔类型

 isActiveNOofCasesNo: boolean;

接下来，只需在需要启用或禁用div标签的地方传递true/false值，div标签将自动启用或禁用。

this.isActiveNOofCasesNo = true;
this.isActiveNOofCasesNo = false;

谢谢……愉快学习！…:) Angular HTML CSS Ionic TypeScript

- Rohit Patil

Answer 4

在HTML中

<div[appViewDisable]="disable_condition">

在 .ts 文件中

disable_condition = 真或假

真将禁用内容的初始化。

- Bharath manda

---

请在您的答案中提供更多细节。根据目前的写作，很难理解您的解决方案。 - Community

Answer 5

您可以使用Angular指令轻松启用/禁用DOM元素：-

创建一个简单的指令-DisableDirective

import { AfterViewInit, Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';

const DISABLED = 'disabled';
const APP_DISABLED = 'app-disabled';
const TAB_INDEX = 'tabindex';
const TAG_ANCHOR = 'a';

@Directive({
  selector: '[appDisable]'
})
export class DisableDirective implements OnChanges, AfterViewInit {

  @Input() appDisable = true;

  constructor(private eleRef: ElementRef, private renderer: Renderer2) { }

  ngOnChanges() {
    this.disableElement(this.eleRef.nativeElement);
  }

  ngAfterViewInit() {
    this.disableElement(this.eleRef.nativeElement);
  }

  private disableElement(element: any) {
    if (this.appDisable) {
      if (!element.hasAttribute(DISABLED)) {
        this.renderer.setAttribute(element, APP_DISABLED, '');
        this.renderer.setAttribute(element, DISABLED, 'true');

        // disabling anchor tab keyboard event
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          this.renderer.setAttribute(element, TAB_INDEX, '-1');
        }
      }
    } else {
      if (element.hasAttribute(APP_DISABLED)) {
        if (element.getAttribute('disabled') !== '') {
          element.removeAttribute(DISABLED);
        }
        element.removeAttribute(APP_DISABLED);
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          element.removeAttribute(TAB_INDEX);
        }
      }
    }
    if (element.children) {
      for (let ele of element.children) {
        this.disableElement(ele);
      }
    }
  }
}

现在将此指令与您的组件 div 一起使用：-

<div [appDisable]="true">
</div>

注意 - 不要忘记在您的AppModule中注册指令。

请参考POST获取详细说明。

- Durgesh Pal

---

它只适用于纯div。如果div包含材料元素，则无法工作。 - Bigeyes

Answer 6

元素不能像表单控件一样被禁用。您可以在

中禁用表单控件。

提供的示例具有自定义类“disabled”

styles: [`
    .button {
      width: 120px;
      border: medium solid black;
    }

    .active {
      background-color: red;
    }

    .disabled {
      color: gray;
      border: medium solid gray;
    }
  `] 

- jmachnik

---

我真的不理解你想达到什么目的。你能提供一个期望的效果吗？[ngClass]="{active: isOn,disabled: isDisabled}" > 在你的模板文件中。 - jmachnik

@MohanGopi，您还可以构建一个自定义容器（指令），以便按需禁用所有子元素。 - jmachnik

Answer 7

HTML文件

div [ngClass]="condition"

ts 文件

this.condition = 'mydisable';

CSS文件

.mydisable {
  pointer-events: none;
}

- Priya Bansal