使用反应式表单时将模板引用变量绑定到ngModel [英] Bind template reference variables to ngModel while using reactive forms

问题描述

我使用的是被动表单。当输入状态无效时，我会显示错误。这是我的观点：

<div class="form-group">
    <label for="username">Username</label>
    <input name="username"
           type="text"
           class="form-control"
           id="username"
           formControlName="username"
           #username/>
    <div class="alert alert-danger"
         *ngIf="formDir.form.controls.username.touched && 
                formDir.form.controls.username.invalid">
        This field is required.
    </div>
</div>

<div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           id="password"
           class="form-control"
           name="password" />
</div>

<pre>{{myForm.value | json}}</pre>
<button class="btn btn-primary" type="submit">Sign in</button>

每次我想要使用ngIf来显示验证错误时，我都必须编写这个笨拙的代码：

*ngIf="formDir.form.controls.username.touched && 
       formDir.form.controls.username.invalid">

要验证的对象越多，就越容易受到迫害。

通过遵循angular.io和this example上的文档，我找到了一个解决方案，但我必须为要在视图上访问的每个表单控件创建一个实例。

我正在寻找一种类似于我们可以在模板驱动的验证中使用的解决方案，使用临时变量和ngModel，如下所示：

<input type="text" class="form-control" name="username" #username="ngModel">
<div *ngIf="username.touched && username.invalid" class="alert alert- 
danger">Email is required</div> 

据我从this link了解，无法实现这一点，但此链接是旧的，可能在较新版本的ANGLINE中存在解决方案。

你能帮我吗？

谢谢

推荐答案

使用ngIf表达式后跟字母重命名该表达式的结果：

<div *ngIf="formDir.form.get('username'); let c" class="form-group">
    <label for="username-id">Username</label>
    <input
       type="text"
       class="form-control"
       id="username-id"
       [formControl]="c" />
    <div class="alert alert-danger" *ngIf="c.touched && c.invalid">
        This field is required.
    </div>
</div>

你也可以说：

<div *ngIf="formDir.form.controls.username; let c" ...>

如果您碰巧没有div或其他可用于ngIf的元素(假定其值始终为真)，则可以使用ng容器。

这篇关于使用反应式表单时将模板引用变量绑定到ngModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！