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引发“无法读取未定义的属性'invalid'”错误。可能是因为该控件在dom中不存在。

当输入上的ngIf更改为隐藏时，它开始起作用，但是我想用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内并应用条件。因此，对于以下情况，输入模型将始终可见。

<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>