时间戳

首页 > 解决方案 > Angular 表单数组以及如何显示错误消息

angularjs - Angular 表单数组以及如何显示错误消息

问题描述

我有一个表单，用户可以在该表单上动态添加多个输入框，以便用户添加电子邮件地址。

在保存表单时，我正在遍历控件列表，构建 JSON 对象并调用 API 以检查数据库以查看电子邮件地址是否已存在。

如果存在，我想在输入下方显示一条错误消息，指示此类 .ie “电子邮件已在使用中”。

我有一个表单数组：

ts代码

        this.inviteForm = this.formBuilder.group({
        invites: this.formBuilder.array([]),
        alreadyUsedList: this.formBuilder.array([])
      });

html

<div formArrayName="invites">                                
   <div *ngFor="let unit of inviteForm.controls.invites.controls; let i=index" class="form-group">    
    <!-- The repeated alias template -->
     <div [formGroupName]="i">
      <input placeholder="" [type]="email" formControlName="invite" required/>
     </div>
     <div *ngIf="inviteForm.controls.alreadyUsedList.controls[i].controls.inUse.value == 'true'">
      <div class="email-in-use">Email already in use</div>           
     </div>
   </div>
</div>

在 API 响应方法中，我试图根据结果数组设置值。

this.inviteForm.controls.alreadyUsedList.value[0].inUse = resData.Data.EmailCheck[0].AlreadyInUse

动态添加电子邮件作品。

API调用有效。

API 的响应符合预期。

问题：

设置 inUse 的值会分配该值，但是不会导致“电子邮件已在使用”ngIf 条件被更新，因此不会显示。

任何帮助，将不胜感激。

解决了：

一切正常，我只是没有正确访问数组中的值来设置值。

this.inviteForm.controls.alreadyUsedList['controls'[0].controls['inUse'].setValue('true');

谢谢！

标签： angularjsangular

解决方案

解决了：

一切正常，我只是没有正确访问数组中的值来设置值。

this.inviteForm.controls.alreadyUsedList['controls'[0].controls['inUse'].setValue('true');

推荐阅读