[英]How to disable the div tag in angular 2
我試圖在該操作成功回調后禁用 div 標簽。
請看我的離子含量
<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>
這是 my.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]
但我無法在成功回調后禁用我的 div 標簽。
我也嘗試使用[disabled]
但不工作
這是禁用 div 標簽的演示,但在我的情況下不起作用
我的要求是在成功回調后禁用我的輸入字段和按鈕
您可以添加屬性,如
<div [attr.disabled]="isDisabled ? true : null">
但<div>
不支持disabled
屬性。
也許這就是你想要的
<div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
[class.isDisabled]="isDisabled"></div>
使用一些自定義 CSS 使.isDiabled
看起來被禁用。
最好創建一個方法將代碼放在那里而不是內聯。
您可以使用 CSS 屬性pointer-events: none; 在您的標簽 div 中:
<ion-content padding class="forgot-password">
<div style="pointer-events: none;">
...
</div>
</ion-content>
這在我的 Angular 8 項目中使用:首先設置為如下所示的 HTML 文件。 設置為 Div 標簽 ngClass=>
<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 標簽或禁用 div 標簽的任何地方傳遞 true/false 值,div 將自動啟用或禁用。
this.isActiveNOofCasesNo = true;
this.isActiveNOofCasesNo = false;
謝謝.....快樂學習!...:) angular html css ionic typescript
您可以使用 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以獲取詳細說明。
在 html
<div[appViewDisable]="disable_condition">
in.ts
disable_condition = True 或 False
True 將禁用內容初始化。
Div 元素不能像表單控件一樣被禁用。 您可以改為禁用 div 中的表單控件。
提供的示例具有自定義類“禁用”
styles: [`
.button {
width: 120px;
border: medium solid black;
}
.active {
background-color: red;
}
.disabled {
color: gray;
border: medium solid gray;
}
`]
HTML 文件
div [ngClass]="condition"
ts文件
this.condition = 'mydisable';
css文件
.mydisable {
pointer-events: none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.