angular - angular - ngIf带有验证控件

Question

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

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

这种隐藏和显示逻辑完美地工作，但是，当找不到控件时，负责显示验证消息的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实现。

Answer 1

如我所见，你可以通过将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>

Answer 2

不要将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>