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

时间:2019-05-17 14:33:31

标签: angular

我有一个如下表格:

 <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 ...

为什么?

3 个答案:

答案 0 :(得分:1)

第一次呈现组件时,检查绑定后将不会创建表单控件。

这意味着您可能正在检查undefined属性。它可以正确显示在插值中,因为插值会发现该值在其中已更改并呈现新值。

使用安全导航操作符修改绑定。

f?.controls?.email?.valid

答案 1 :(得分:0)

只需使用

f.controls.email?.valid

代替f.controls.email?.valid

答案 2 :(得分:0)

您似乎正在将模板驱动的方法与反应形式混合在一起。

这是模板驱动的:

#f="ngForm"

这是反应性的:

"f.controls..."

摘自官方文档:

  

#name =“ ngModel”将NgModel导出到名为name的局部变量中。 NgModel反映了其基础FormControl的许多属性   实例,因此您可以在模板中使用它来检查控制权   状态,例如有效和肮脏。有关控件属性的完整列表,   请参阅AbstractControl API参考。

https://angular.io/guide/form-validation#template-driven-validation

因此,请更改此内容:

f.controls.email.valid

对此:

email.valid

因为您不需要通过表单控件来访问模板驱动方法中的FormControl。

希望有帮助。