如何在不使用表单控件的情况下启用和使用 mat-error

Posted 2023-03-13

【中文标题】如何在不使用表单控件的情况下启用和使用 mat-error

【英文标题】：how to enable and use mat-error withough using form control

【发布时间】：2022-01-24 04:25:11

【问题描述】：

我正在使用 ngModel，我想使用 mat-error，但如果您不使用表单，它就不起作用，是否有一些破解？我们可以在 ngModel 中使用 mat-error。

#代码

<mat-form-field appearance="fill"  class="w-48per">
    <mat-label>First Name</mat-label>
    <input [(ngModel)]="territoryAssignmentFields.repmFirstName" name="repmFirstName" 
    matInput placeholder="" autocomplete="activityNumber">
    <!-- <div class="mat-form-field-subscript-wrapper custom-mat-error" >
        <div class="mat-error" >Required</div>                        
      </div>
    <div id="repmFirstNameRequiredError"></div>   -->
    <mat-error >My error message</mat-error>
</mat-form-field>

【问题讨论】：

如果你使用响应式表单，这样做会容易得多，如果你需要帮助写一个，请告诉我

【参考方案1】：

您可以在输入中创建一个template variable 并在mat-error 中使用它。

#nameCtrl="ngModel" 

您可以像这样在mat-error 中使用上述变量：-

<mat-error *ngIf="nameCtrl.hasError('required')">required</mat-error>

完整的示例代码：-

<mat-form-field appearance="fill"  class="w-48per">
    <mat-label>First Name</mat-label>
    <input [(ngModel)]="territoryAssignmentFields.repmFirstName" name="repmFirstName"  #nameCtrl="ngModel" 
    matInput placeholder="" autocomplete="activityNumber">

    <mat-error *ngIf="nameCtrl.hasError('required')">required</mat-error>
</mat-form-field>