时间戳

首页 > 解决方案 > Angular 2访问模板中的表单元素

angular - Angular 2访问模板中的表单元素

问题描述

我有一个如下所示的表格：

 <form (submit)="onSubmit()" #f="ngForm">
        <div class="form-group">
          <label for="email">E-Mail</label>
          <input type="text" class="form-control" id="email" name="email" ngModel required email #email="ngModel">
          {{f.controls.email.valid}}
          <span *ngIf="f.controls.email.valid">Field must be a valid e-mail!</span>
        </div>

值 false 在 {{}} 内正确呈现，但我收到一个控制台错误，提示在 ngIf 内它无法解析未定义的有效属性。我需要#email="ngModel"在输入元素中使用占位符，然后引用 email.valid...

为什么？

标签： angular

解决方案

第一次渲染组件时，检查绑定时不会创建表单控件。

这意味着您可能正在检查未定义的属性。它在插值中正确显示，因为插值发现其中的值已更改并呈现新值。

使用安全导航运算符修改绑定。

f?.controls?.email?.valid

推荐阅读