Question

所以我真的很难建立一个带有验证的表单。这个想法如下：

这是一个后端应用程序
用户需要提交包含凭据，电子邮件地址列表和校验和值列表的表单。

我要验证的内容如下：

用户名和密码存在/非空白（让此工作）
电子邮件地址列表不为空
校验和值列表不为空

问题

问题是我不知道如何验证列表。我正在使用PrimeNG的PickList和DataTable组件。我也目前正在使用模板驱动表单（答案不需要模板驱动）。这是相应部分的HTML代码：

料单

<p-pickList [source]="artifactoryList" [target]="artifactorySelectedList" [responsive]="true" [showSourceControls]="false"
                            [showTargetControls]="false" (onMoveToTarget)="addChecksums($event)" (onMovetoSource)="removeChecksums($event)">
... SOME TEMPLATING THAT GOES HERE BUT CAN'T SHOW ON STACKOVERFLOW PROPERLY ...
</p-pickList>

数据表

                    <p-dataTable var="contact" [value]="model.contactList">
                        <p-column>
                            <template let-email="rowData" pTemplate type="body">
                                <span>{{email}}</span>
                            </template>
                        </p-column>
                        <p-column styleClass="col-button">
                            <template let-email="rowData" pTemplate type="body">
                                <input type="button" class="btn btn-danger" value="Delete" (click)="removeContact(email)">
                            </template>
                        </p-column>
                    </p-dataTable>

当前的解决方法

目前的解决方法是什么都不做。因此，这两个组件没有验证。我检查了所有答案，但所有示例似乎只使用input html标记。

我目前的想法是这样的：

我需要将这些列表的值添加到ngForm对象的value属性中。所以要么
- 我遗漏了一些明显的东西
- 我打算实现一个缺少的界面（目前正在实施OnInit）

问题

问题是如何使用Angular 2方式验证Picklist和DataTable上的支持数组？

Answer 1

为自定义列表输入创建自定义验证程序。

自定义验证器：

function requiredList(fromControl) {
  return fromControl.value && fromControl.value.length ? null : {
    requiredList: {
      valid: false
    }
  };
}

在基于模型的方法中使用自定义验证器的组件：

import { FormBuilder } from '@angular/forms';

export class MyFormComponent {
    constructor(formBuilder: FormBuilder) {
        this.form = formBuilder.group({emailList: [[], requiredList]})
        …

或稍后用

设置

this.form.controls.emailList.setValidators([requiredList]);

在模板中使用可以将列表作为值处理的自定义组件

<email-list formControlName="emailList"></email-list>

如何在Angular 2表单中验证集合（列表不能为空规则）？

1 个答案: