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 抛出 "Cannot read property 'invalid' of undefined" 错误。可能是因为 dom 中不存在该控件。

当ngIf on input改成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 中并应用条件。因此，对于以下条件，输入模型将始终可见。

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

ngIf 与验证控制

ngIf with validation controls

angular

form-control