Question

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

<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所理解的那样，没有办法实现这个目标，但是这个链接已经很老了，而且可能存在更新版角度的解决方案。

你可以帮帮我吗？

感谢

Answer 1

使用 ngIf 表达式后跟一个 let，重命名表达式的结果：

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

如果您没有可用于 ngIf 的 div 或其他元素（假定其值始终为真），则可以使用 ng-container。

Answer 2

要根据每个字段的验证显示错误，您可以尝试：

<div *ngIf="formDir.form.controls[fieldName].invalid" class="alert alert- 
danger">Email is required</div>

为此你不需要任何其他变量，在form-controls对象中我们有验证。如果您需要更多详细信息，请与我们联系

使用反应式表单时将模板引用变量绑定到ngModel

2 个答案: