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中，模板引用变量的作用域仅限于它们在其中定义的模板。因此，基本上，您只能在#Custom_FirstName中将每个div与*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添加到模块导入中。

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

2 个答案: