angular - 如何在 Angular 2 中获得单一表单字段的有效性？

Question

注意:这与我在 https://stackoverflow.com/questions/38356330/how-to-use-pattern-validation-in-angular-2-based-on-ngmodel-template-model-driv 的其他问题不是同一个问题。

这是我的代码(带有已弃用表单的 Angular 2 rc2 应用程序):

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

inputControlX 已正确验证(ng-invalid 类已添加到输入中)。 但是当我添加

 {{inputControlX.valid}}

或

{{myForm.inputControlX.valid}}

或

{{ngForm.inputControlX.valid}}

我不断收到错误:无法读取未定义的有效属性。 另一方面，添加(如 this answered question )#inputControlX="ngForm"，使其工作(即使没有 ngControl)

为什么这是必要的？

Answer 1

您必须在此处使用 Elvis 运算符/ngIf 指令，因为当 Angular 尝试评估页面的绑定(bind)时，myForm 对象会避难。尚未初始化。因此，在计算 myForm.inputControlX.valid 表达式时，当时未定义 myForm 对象，因此会引发错误。

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