为什么在 for 循环中未定义使用 ngModel 的模板引用变量？

Question

我正在尝试在 HTML 模板中获取一个 DOM 元素来禁用/启用 表单按钮基于输入值并使用ngModel:#Custom_FirstName="ngModel"。输入是分隔组件中的自定义字段。

我的问题是元素 Custom_FirstName 始终是 undefined，我发现它与 For 循环 ngFor 有关。当我删除ngFor 时，错误已修复。但这并不能解决我的问题，因为我需要 for 循环，因为用户可以动态添加多个输入文本和 firstName 用户。

代码：

<div *ngFor="let el of users.departments.admins; let i=index; trackBy: trackByFn"
    <input-text [name]="'firstanme'"                                                             
                [(ngModel)]="el.firstName"                                                          
                [ngModelOptions]="{standalone: true}"                                                      
                [readonly]="false"                                                           
                [required]="true"
                labelText="First Name"
                #Custom_FirstName="ngModel">
    </input-text>
</div>

按钮：

<button [disabled]="!Custom_FirstName.value || ....>

我一直在检查official Doc，但找不到解决方法。任何提示如何解决此问题？

Answer 1

官方文档says：

引用变量的范围是整个模板。所以，不要 在同一个模板中多次定义相同的变量名 运行时值将是不可预测的。

由于您已经将输入与数据绑定，只需跟踪数据即可。添加到您的组件中：

hasEmptyValue() {
    return users.departments.admins
        .some(admin => !admin.firstName || admin.firstName.length===0);
}

并在模板中进行更改：

<button [disabled]="hasEmptyValue() || ....>

Answer 2

在 Angular 中，模板引用变量的范围仅限于定义它们的模板。所以基本上你只能在 div 中使用每个 #Custom_FirstName 和 *ngFor，而不是在它之外。如果您不使用*ngFor，则范围会增加到整个文档，因此您不会得到undefined。

为了解决您的问题，我建议您将代码包装在 <form> 标记中并获取表单的模板引用并检查表单的有效性以禁用按钮：

<form #myForm="ngForm">
  <div *ngFor="let el of users.departments.admins; let i=index; trackBy: trackByFn">
    <input-text [name]="'firstanme'"                                                             
                [(ngModel)]="el.firstName"                                                    
                [readonly]="false"                                                           
                [required]="true"
                labelText="First Name">
    </input-text>
  </div>
</form>

您的按钮将是：

<button [disabled]="myForm.invalid">

另外，请确保将 FormsModule 添加到您的模块导入中。