angular - angular - ngIf带有验证控件

139 4

我正在编写一个自定义表单组件,该组件基本上是一个文本框,它将根据特定属性更改为标签或文本区域。

如果自定义组件设置为只读,则应该隐藏文本框,并且必须显示标签。

这种隐藏和显示逻辑完美地工作,但是,当找不到控件时,负责显示验证消息的dom元素会引发错误。


<span class="form-control-readonly" *ngIf="readonly == true" #valuelabel>


 {{inputModel}}


</span>



<input 


 *ngIf="readonly != true" 


 #control="ngModel" 


 [id]="id" 


 type="text" 


 class="form-control" 


 [placeholder]="caption" 


 [(ngModel)]="inputModel" 


 (ngModelChange)="onTextChange()" 


 [maxlength]="maxLength"


 [required]="isRequired === true ? '' : null" 


 [ngClass]="{'invalid': !control.valid, 'valid': control.valid }"> 



 <div *ngIf="(readonly == false) && (control.invalid && hideFeedback === false)" class="invalid-feedback">


 <div *ngIf="(readonly == false) && (control.errors.required)">{{ caption }} is required</div>


 <div *ngIf="(readonly == false) && (control.errors.maxlength)">{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long </div> 


 </div>



最后一个div中的control.errors引发“无法读取未定义的属性'无效'”错误。可能是因为该控件在dom中不存在。

当ngIf更改为hidden时,它可以工作,但是我想用ngIf实现。

时间: 原作者:

74 4

如我所见,你可以通过将readOnly设为布尔值而不是进行比较。你可以将创建控件的所有代码包装在一个*ngIf下


<span *ngIf="readonly" class="form-control-readonly" #valuelabel>


 {{inputModel}}


</span>



<div *ngIf="!readonly">


 <input #control="ngModel" [id]="id" type="text"


 class="form-control" [placeholder]="caption"


 [(ngModel)]="inputModel" (ngModelChange)="onTextChange()"


 [maxlength]="maxLength"


 [required]="isRequired === true ? '' : null"


 [ngClass]="{'invalid': !control.valid, 'valid': control.valid }">



 <div *ngIf="(control.invalid && hideFeedback === false)" class="invalid-feedback">


 <div *ngIf="(control.errors.required)">{{ caption }} is required</div>


 <div *ngIf="(control.errors.maxlength)">{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long</div>


 </div>


</div>



原作者:
85 0

不要将ngIf放在输入上,而是将输入和验证div包裹在另一个div内,并且应用condition。因此,输入模型对于以下条件始终是可见的。


<span class="form-control-readonly" *ngIf="readonly == true" #valuelabel>


 {{inputModel}}


</span>



<div *ngIf="readonly != true">


 <input 


 #control="ngModel" 


 [id]="id" 


 type="text" 


 class="form-control" 


 [placeholder]="caption" 


 [(ngModel)]="inputModel" 


 (ngModelChange)="onTextChange()" 


 [maxlength]="maxLength"


 [required]="isRequired === true ? '' : null" 


 [ngClass]="{'invalid': !control.valid, 'valid': control.valid }"> 



 <div *ngIf="(readonly == false) && (control.invalid && hideFeedback===false)" class="invalid-feedback">


 <div *ngIf="(readonly == false) && (control.errors.required)">{{ caption }} is required</div>


 <div *ngIf="(readonly == false) && (control.errors.maxlength)">{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long </div> 


 </div>


</div>



原作者:
...