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

我正在使用反应式表单。当输入状态无效时，我会显示错误。这是我的观点：

<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 上的文档和这个例子 https://stackblitz.com/angular/jxkgqklvokp?file=src%2Fapp%2Freactive%2Fhero-form-reactive.component.ts我找到了一个解决方案，但我必须为我想要在视图中访问它的每个表单控件创建一个实例。

我正在寻找一种解决方案，例如我们可以在模板驱动验证中使用的解决方案，使用临时变量和 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> 

据我了解这个链接 https://github.com/angular/angular/issues/9363没有办法实现这一点，但这个链接是旧的，它可能在新版本的角度中存在解决方案。

你能帮助我吗？

thanks

使用 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。