Angular中如何检测Form表单中mat-input输入框是否非空以控制元素显示

问题原因 #

你原来的写法不生效是因为 modelForm.get('emailAddress') 返回的是 FormControl 实例对象，并非输入框的实际输入值，所以直接取 .length 无法获取内容长度。

正确写法 #

你需要先通过 value 属性拿到输入框的实际内容，再判断长度即可。推荐对内容做去空格处理，避免用户输入全空格被误判为有效内容，修改后的HTML2代码如下：

<div fxLayout="row" *ngIf="modelForm.get('emailAddress')?.value?.trim().length > 0">
    <span id="text" style="padding-top: 20px;">Enter user's information (*)</span>
</div>

代码里的可选链运算符 ?. 是为了避免表单控件初始化未完成时读取属性报错，如果你使用的Angular版本不支持可选链，也可以写成：

<div fxLayout="row" *ngIf="modelForm.get('emailAddress').value && modelForm.get('emailAddress').value.trim().length > 0">
    <span id="text" style="padding-top: 20px;">Enter user's information (*)</span>
</div>

可选简化方案 #

如果你已经给emailAddress控件设置了required校验规则，也可以直接通过校验状态判断，写法更简洁：

<div fxLayout="row" *ngIf="!modelForm.get('emailAddress')?.hasError('required')">
    <span id="text" style="padding-top: 20px;">Enter user's information (*)</span>
</div>

内容的提问来源于stack exchange，提问作者Art McAhon