angular - angular - ngIf帶有驗證控制項

我正在編寫一個自定義表單組件,該組件基本上是一個文本框,它將根據特定屬性更改為標籤或文本區域。

如果自定義組件設置為只讀,則應該隱藏文本框,並且必須顯示標籤。

這種隱藏和顯示邏輯完美地工作,但是,當找不到控制項時,負責顯示驗證消息的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實現。

时间: 原作者:

如我所見,你可以通過將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>



原作者:

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



原作者:
...