我有一个如下表格:
<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 ...
为什么?
答案 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。
希望有帮助。