- 首页
- 其他开发
- 升级到 Angular 9 后指令不适用于 FormControl
升级到 Angular 9 后指令不适用于 FormControl
[英] Directives not working with FormControl after upgrading to Angular 9
本文介绍了升级到 Angular 9 后指令不适用于 FormControl的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用了启用和禁用表单的指令.这是在一个单独的打字稿文件中.代码如下:-
import { NgControl } from '@angular/forms';从'@angular/core'导入{指令，输入}；@指示({选择器:'[disableControl]'})导出类 DisableControlDirective {@Input('disableControl') set disableControl( condition : boolean ) {const 动作 = 条件 ?'禁用启用';this.ngControl.control[action]();}构造函数(私有 ngControl : NgControl){}}
HTML:-
<div class="card"><h3 class="mb-0"><button class="btn btn-primary btn-sm" aria-expanded="false">注释<form [formGroup]="commentsForm" data-target="comments" id="commentsForm" (ngSubmit)="onSubmit($event)"><div class="row"><div class="col"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">评论</span>
<textarea formControlName="comment" class="form-control" [disableControl]="comments" placeholder="添加评论."></textarea>
<div class="row"><div class="col text-right"><ng-container *ngIf="comments; else commentsbtnElseBlock"><ng-container *ngTemplateOutlet="params;context:{btnId: 'comments', toggleValue: comments}"></ng-container></ng-容器><ng-template #commentsbtnElseBlock><ng-container *ngTemplateOutlet="paramsElse;context:{btnId: 'comments', toggleValue: comments}"></ng-container></ng-模板>
<div class="row"><div class="col"><div *ngFor="let commentData of commentsList; let i=index"><div class="评论列表"><div class="user-initial border rounded-circle">{{commentData.UpdatedBy |切片:0:1}}
<div class="comment-info"><ul><li class="ml-2 mr-2"><span class="user-name">{{commentData.UpdatedBy}}</span><li><跨度><small>评论{{commentData.UpdatedDate |日期:'中等'}}</small></span><!-- <i input type="checkbox" class="fas fa-trash-alt" id="{{commentData.RecordId}}" (change)=onChange($event) (click)="deleteCommentsEntity(i,project.ProjectId)"></i>-->
<div class="ml-5 mb-5">{{commentData.Comment}}<!--<div class="project-desc" style="text-align:left; width:3080px"><app-inline-edit [(ngModel)]=commentData.Comment label=commentData.Comment [required]="true" type="input" style="width:300px"></app-inline-edit></div>--><button class="btn btn-pill btn-primary btn-sm mr-2" style="text-align:right;color:Tomato;margin-right:20px;float:right" type="button"><i ng-mouseover="count = count + 1" ng-init="count=0" ng-show="Delete" id="{{commentData.RecordId}}" class="fas fa-trash-alt风格=文本对齐:右；"(click)="deleteCommentsEntity(commentData.RecordId,project.ProjectId)"></i>
</表单>
我担心的是上面的代码适用于以下包:-
"@angular/animations": "^8.0.2","@angular/common": "^8.0.2","@angular/compiler": "^8.0.2","@angular/core": "^8.0.2","@angular/forms": "^8.0.2","@angular/http": "^8.0.0-beta.10","@angular/platform-browser": "^8.0.2","@angular/platform-browser-dynamic": "^8.0.2","@angular/platform-server": "^8.2.11","@angular/router": "^8.0.2",
并且不使用:-
"@angular/animations": "^9.0.0-rc.12","@angular/common": "^9.0.0-rc.12","@angular/compiler": "^9.0.0-rc.12","@angular/core": "^9.0.0-rc.12","@angular/forms": "^9.0.0-rc.12","@angular/platform-browser": "^9.0.0-rc.12","@angular/platform-browser-dynamic": "^9.0.0-rc.12","@angular/platform-server": "^8.2.11","@angular/router": "^9.0.0-rc.12",
我收到此错误 -
<块引用>无法读取未定义的属性 'disabled'DisableControlDirective.set 无法读取属性禁用"未定义
会不会是版本升级的问题?我一窍不通.请建议是否有任何方法可以解决此问题.
解决方案
由于某种原因，angular 9 注入的 ngControl 无法正常工作，因为它在 angular 8 中工作，作为一种解决方法，您可以将 this.ngControl.controlaction 包装在 setTimeout
内试试这个:
import { NgControl } from '@angular/forms';从'@angular/core'导入{指令，输入}；@指示({选择器:'[disableControl]'})导出类 DisableControlDirective {@Input('appDisable') set disableControl( condition : boolean ) {const 动作 = 条件 ?'禁用启用';setTimeout(()=>{this.ngControl.control[action]();});}构造函数(私有 ngControl : NgControl){}}
或
您可以通过像这样在 ngOnChanges 中监听绑定更改来解决此问题
@Input('appDisable') disableControl;ngOnChanges(更改){如果(更改['disableControl']){const action = this.opDisabled ?'禁用启用';this.ngControl.control[action]();}}
欲了解更多信息，请查看此
I have used directives for enabling and disabling forms. This is in a separate typescript file. Code is given below: -
import { NgControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[disableControl]'
})
export class DisableControlDirective {
@Input('disableControl') set disableControl( condition : boolean ) {
const action = condition ? 'disable' : 'enable';
this.ngControl.control[action]();
}
constructor (private ngControl : NgControl){}
}
HTML: -
<div class="card" *ngIf="commentsFormEnable">
<div class="card">
<h3 class="mb-0">
<button class="btn btn-primary btn-sm" aria-expanded="false">
Comments
</button>
</h3>
<form [formGroup]="commentsForm" data-target="comments" id="commentsForm" (ngSubmit)="onSubmit($event)">
<div class="row">
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Comments</span>
</div>
<textarea formControlName="comment" class="form-control" [disableControl]="comments" placeholder="Add a comment."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col text-right">
<ng-container *ngIf="comments; else commentsbtnElseBlock">
<ng-container *ngTemplateOutlet="params;context:{btnId: 'comments', toggleValue: comments}"></ng-container>
</ng-container>
<ng-template #commentsbtnElseBlock>
<ng-container *ngTemplateOutlet="paramsElse;context:{btnId: 'comments', toggleValue: comments}"></ng-container>
</ng-template>
</div>
</div>
<div class="row">
<div class="col">
<div *ngFor="let commentData of commentsList; let i=index">
<div class="comment-list">
<div class="user-initial border rounded-circle">
{{commentData.UpdatedBy | slice:0:1}}
</div>
<div class="comment-info">
<ul>
<li class="ml-2 mr-2">
<span class="user-name">{{commentData.UpdatedBy}}</span>
</li>
<li>
<span>
<small>commented {{commentData.UpdatedDate | date:'medium'}}</small>
</span>
<!-- <i input type="checkbox" class="fas fa-trash-alt" id="{{commentData.RecordId}}" (change)=onChange($event) (click)="deleteCommentsEntity(i,project.ProjectId)"></i>-->
</li>
</ul>
</div>
<div class="ml-5 mb-5">
{{commentData.Comment}}
<!--<div class="project-desc" style="text-align:left; width:3080px">
<app-inline-edit [(ngModel)]=commentData.Comment label=commentData.Comment [required]="true" type="input" style="width:300px">
</app-inline-edit>
</div>-->
<button class="btn btn-pill btn-primary btn-sm mr-2" style="text-align:right;color:Tomato;margin-right:20px;float:right" type="button">
<i ng-mouseover="count = count + 1" ng-init="count=0" ng-show="Delete" id="{{commentData.RecordId}}" class="fas fa-trash-alt" style="text-align:right;" (click)="deleteCommentsEntity(commentData.RecordId,project.ProjectId)"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
My concern here is that the above code works with below packages: -
"@angular/animations": "^8.0.2",
"@angular/common": "^8.0.2",
"@angular/compiler": "^8.0.2",
"@angular/core": "^8.0.2",
"@angular/forms": "^8.0.2",
"@angular/http": "^8.0.0-beta.10",
"@angular/platform-browser": "^8.0.2",
"@angular/platform-browser-dynamic": "^8.0.2",
"@angular/platform-server": "^8.2.11",
"@angular/router": "^8.0.2",
And not working with: -
"@angular/animations": "^9.0.0-rc.12",
"@angular/common": "^9.0.0-rc.12",
"@angular/compiler": "^9.0.0-rc.12",
"@angular/core": "^9.0.0-rc.12",
"@angular/forms": "^9.0.0-rc.12",
"@angular/platform-browser": "^9.0.0-rc.12",
"@angular/platform-browser-dynamic": "^9.0.0-rc.12",
"@angular/platform-server": "^8.2.11",
"@angular/router": "^9.0.0-rc.12",
I am getting this error -
cannot read property 'disabled' of undefined at
DisableControlDirective.set cannot read property 'disable' of
undefined
Could it be a problem with the version upgrade? I am clueless. Please suggest if there is any way to resolve this issue.
解决方案
For some reason angular 9 injected ngControl is not working as it's was working in angular 8,
As a Workaround you can wrap this.ngControl.controlaction inside setTimeout
Try this:
import { NgControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[disableControl]'
})
export class DisableControlDirective {
@Input('appDisable') set disableControl( condition : boolean ) {
const action = condition ? 'disable' : 'enable';
setTimeout(()=>{
this.ngControl.control[action]();
});
}
constructor (private ngControl : NgControl){}
}
Or
You can fix this issue by listening binding change inside ngOnChanges like this
@Input('appDisable') disableControl;
ngOnChanges(changes) {
if (changes['disableControl']) {
const action = this.opDisabled ? 'disable' : 'enable';
this.ngControl.control[action]();
}
}
For More Information check this
这篇关于升级到 Angular 9 后指令不适用于 FormControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
