Angular2中如何获取单个表单域的有效性？

Question

注意：这不是与我在

的另一个问题相同的问题

这是我的代码（Angular 2 rc2 app with deprecated forms）：

<form #myForm="ngForm">
    <input id="inputControlX" ngControl="inputControlX" pattern="abcd">
    {{inputControlX.valid}}
</form>

inputControlX 已正确验证（ng-invalid class 已添加到输入中）。但是当我添加

 {{inputControlX.valid}}

或

{{myForm.inputControlX.valid}}

或

{{ngForm.inputControlX.valid}}

我不断收到错误消息：无法读取属性 valid of undefined。另一方面添加（如）#inputControlX="ngForm"，使其工作（即使没有 ngControl）

为什么这是必要的？

Answer 1

你必须在这里使用 Elvis 运算符/ngIf 指令，因为当 angular 尝试评估页面的绑定时，myForm 对象尚未初始化.因此，在评估 myForm.inputControlX.valid 表达式时，当时未定义 myForm 对象，因此会引发错误。

{{myForm?.inputControlX?.valid}}
//OR    
<span *ngIf="myForm"> {{myForm.inputControlX.valid}}</span>

How to get a single form field validity in Angular 2?