问题描述
我是 angular 5 的新手,在这里我试图根据条件禁用输入字段.
<mat-form-field class="email-field-width"><垫标签>输入 OTP</mat-label><input [attr.disabled]="isDiableSignInOTPField" #OTP (click)="getOTP(OTP.value)" [formControl]="signInOTP" maxlength="6" matInput required placeholder="OTP"><mat-hint [ngStyle]="{color:hintColor}">{{hintOTP}}</mat-hint></mat-form-field>
页面加载后,此 div 对用户不可见.一旦 *ngIf="isOTPFieldEnabled"
值满足 TRUE,用户将可以看到它.一旦在 getOTP() 方法中验证了用户输入,我想禁用此输入字段.
为此,我设置了 [attr.disabled]
功能运行良好,但出现了标题中提到的错误.
详细错误:
ERROR 错误:ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改.以前的值:'mat-focused: true'.当前值:'mat-focused: false'.在 viewDebugError (core.js:7290)在 expressionChangedAfterItHasBeenCheckedError (core.js:7278)在 checkBindingNoChanges (core.js:7380)在 checkNoChangesNodeDynamic (core.js:10263)在 checkNoChangesNode (core.js:10233)在 debugCheckNoChangesNode (core.js:10833)在 debugCheckRenderNodeFn (core.js:10787)在 Object.eval [as updateRenderer] (CheckoutComponent.html:159)在 Object.debugUpdateRenderer [作为 updateRenderer] (core.js:10776)在 checkNoChangesView (core.js:10131)
更新:
导出类 CheckoutComponent 实现 OnInit {isOTPFieldEnabled:boolean=false;isDiableSignInOTPField:boolead =false;ngOnInit(){}电子邮件验证(){this.isOTPFieldEnabled=true;}获取OTP(OTP){如果(OTP){this.isDiableSignInOTPField=true;}}}
查看生命周期钩子文档将 ngOnInit()
更改为 ngAfterContentInit()
.或许能帮到你.
ngAfterContentInit(){this.emailVerified();this.getOTP(OTP);}this.emailVerified() {this.isOTPFieldEnabled=true;}this.getOTP(OTP){如果(OTP){this.isDiableSignInOTPField=true;}}
I am new to angular 5 ,Here I am trying to disable a input field based on the condition.
<div *ngIf="isOTPFieldEnabled" class="email-field-width">
<mat-form-field class="email-field-width">
<mat-label> Enter OTP</mat-label>
<input [attr.disabled]="isDiableSignInOTPField" #OTP (click)="getOTP(OTP.value)" [formControl]="signInOTP" maxlength="6" matInput required placeholder="OTP">
<mat-hint [ngStyle]="{color: hintColor}">{{hintOTP}}</mat-hint>
</mat-form-field>
</div>
After the page load this div is not visible to the user .Once the *ngIf="isOTPFieldEnabled"
value is meets TRUE it will be visible to the user.And once the user input validated in the getOTP() method I want to disable this input field .
For that I have set [attr.disabled]
the functionality is working fine but I got the error as I mentioned in my title.
Detailed Error :
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: true'. Current value: 'mat-focused: false'.
at viewDebugError (core.js:7290)
at expressionChangedAfterItHasBeenCheckedError (core.js:7278)
at checkBindingNoChanges (core.js:7380)
at checkNoChangesNodeDynamic (core.js:10263)
at checkNoChangesNode (core.js:10233)
at debugCheckNoChangesNode (core.js:10833)
at debugCheckRenderNodeFn (core.js:10787)
at Object.eval [as updateRenderer] (CheckoutComponent.html:159)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:10776)
at checkNoChangesView (core.js:10131)
UPDATE:
export class CheckoutComponent implements OnInit {
isOTPFieldEnabled:boolean=false;
isDiableSignInOTPField:boolead =false;
ngOnInit(){}
emailVerified(){
this.isOTPFieldEnabled=true;
}
getOTP(OTP){
if(OTP){
this.isDiableSignInOTPField=true;
}
}
}
Looking at the lifecycle hooks documentationChange ngOnInit()
to ngAfterContentInit()
.It might help you.
ngAfterContentInit(){
this.emailVerified();
this.getOTP(OTP);
}
this.emailVerified() {
this.isOTPFieldEnabled=true;
}
this.getOTP(OTP) {
if(OTP) {
this.isDiableSignInOTPField=true;
}
}
这篇关于错误错误:Angular 5 中的 ExpressionChangedAfterItHasBeenCheckedError的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!