带有验证控件的 ngIf答案

【问题标题】：ngIf with validation controls带有验证控件的 ngIf
【发布时间】：2020-02-26 21:41:41
【问题描述】：

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

所以如果自定义组件设置为只读，那么文本框应该被隐藏并且必须显示一个标签。

这种隐藏和显示逻辑完美无缺。但是，当找不到控件时，负责显示验证消息的 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 on input 改为 hidden 时，它开始工作，但我想用 ngIf 来实现。

【问题讨论】：

嘿，请分享切换只读属性的逻辑
使用“安全操作符”control?.errors?.required，所以如果没有控制或不控制.errors 或不控制.error.required 条件为假

标签： angular form-control

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：