如何在表单提交时显示多条错误消息？

Question

您好，我正在使用 Angular 开发 Web 应用程序。我正在尝试在提交表单时显示错误消息。我有两个下拉列表。如果用户未从下拉列表中选择任何选项，我将尝试显示错误消息。如果用户没有从第一个下拉列表中选择选项，那么我可以显示错误消息，但我无法显示第二个下拉列表的错误消息。

<form *ngIf="formResetToggle" class="form-horizontal" name="permissionEditorForm" #f="ngForm" novalidate
      (ngSubmit)="f.form.valid ? savePermission(selectedUserRole.value,selectedScopeName.value) :(!userrole.valid && showErrorAlert('User role is required', 'Please select user role'));">

    <div class="form-group has-feedback">
        <label class="control-label col-md-2" for="userrole">User Role:</label>
        <div class="col-md-10" ng-class="{'valid':userrole.$valid}">
            <select #selectedUserRole autofocus name='userrole' class="form-control" [(ngModel)]='userrole' required>
                <option value="">Select User Role</option>
                <option *ngFor="let userrole of userroles; let i = index" [value]="userrole.userroleid">
                    {{userrole.username}}
                </option>
            </select>
            <span *ngIf="(f.submitted && !userrole.valid && !userrole) || (!userrole.valid && userrole.dirty)" class="errorMessage">
                User Role Required!
            </span>
        </div>
    </div>


    <div class="form-group has-feedback">
        <label class="control-label col-md-2" for="scopename">Scope Name:</label>
        <div class="col-md-10" ng-class="{'valid':scopename.$valid}">
            <select #selectedScopeName autofocus name='scopename' class="form-control" [(ngModel)]='scopename' required>
                <option value="">Select Scope Name</option>
                <option *ngFor="let scope of scopes; let i=index" [value]="scope.scopeid">
                    {{scope.scopevalue}}
                </option>
            </select>
            <span *ngIf="(f.submitted && !scopename.valid && !scopename) || (!scopename.valid && scopename.dirty)" class="errorMessage">
                Scope Name Required!
            </span>
        </div>
    </div>

    <label class="control-label col-md-2"> </label>
    <div class="col-md-7">
        <div class="checkbox">

        </div>
    </div>

    <div class="col-md-12">
        <hr class="edit-last-separator-hr" />
    </div>


    <div class="form-group actionBtn-form-group">
        <div class="pull-right">
            <input type="submit" class="btn btn-primary" value="Save Permission"/>

        </div>
    </div>
    <div class="clearfix"></div>
</form>

我已经写了下面的条件来进行验证。

<form *ngIf="formResetToggle" class="form-horizontal" name="permissionEditorForm" #f="ngForm" novalidate (ngSubmit)="f.form.valid ?savePermission(selectedUserRole.value,selectedScopeName.value) :
(!userrole.valid && showErrorAlert('User role is required', 'Please select user role'));">

上面的代码只验证第一个下拉列表。

我在提交按钮上有 if 条件。我能够显示第一个下拉列表的错误消息。有人可以帮我完成上述验证工作吗？任何帮助，将不胜感激。谢谢你

Answer 1

您将表单的模型（即包含在表单中输入/选择的值的字段）与表单使用的 FormGroups 和 FormControls 的内部结构混淆了。

前者只包含值（用户角色 ID、范围 ID）。这些值上没有 valid 或 dirty 字段。它们只是字符串或数字。这些是作为输入传递给 ngModel 指令的字段：

[(ngModel)]='userrole'
[(ngModel)]='scopename'

后者允许测试表单控件是否有效、脏等。它们存储在本地模板变量中（应该有不同的名称），使用 ngModel 指令实例初始化：

#roleCtrl="ngModel"
#scopeCtrl="ngModel"

您还将同一变量 userrole 用于两个不同的事情：一次作为您的第一个选择框的模型：

[(ngModel)]='userrole'

并且作为变量在循环中引用当前角色：

*ngFor="let userrole of userroles;

这确实不是一个好主意。

您应该首先在组件中拥有一个模型对象，然后将表单控件绑定到该模型的字段：

model = {
  roleId: '',
  scopeId: ''
};

那么提交时所做的应该是组件的一部分，而不是视图的一部分。并且组件可以访问表单的模型，因此不需要从视图中传递它。

您的表单应如下所示：

<form *ngIf="formResetToggle" class="form-horizontal" name="permissionEditorForm" #f="ngForm" (ngSubmit)="savePermission(f)">

    <div class="form-group has-feedback">
        <label class="control-label col-md-2" for="userrole">User Role:</label>
        <div class="col-md-10" ng-class="{'valid': roleCtrl.valid}">
            <select #roleCtrl="ngModel" autofocus name='userrole' class="form-control" [(ngModel)]='model.roleId' required>
                <option value="">Select User Role</option>
                <option *ngFor="let userrole of userroles; let i = index" [value]="userrole.userroleid">
                    {{userrole.username}}
                </option>
            </select>
            <span *ngIf="(!roleCtrl.valid && (f.submitted || roleCtrl.dirty)" class="errorMessage">
                User Role Required!
            </span>
        </div>
    </div>


    <div class="form-group has-feedback">
        <label class="control-label col-md-2" for="scopename">Scope Name:</label>
        <div class="col-md-10" ng-class="{'valid': scopeCtrl.valid}">
            <select #selectedScopeName autofocus name='scopename' class="form-control" [(ngModel)]='model.scopeId' required>
                <option value="">Select Scope Name</option>
                <option *ngFor="let scope of scopes; let i=index" [value]="scope.scopeid">
                    {{scope.scopevalue}}
                </option>
            </select>
            <span *ngIf="(!scopeCtrl.valid && (f.submitted || scopeCtrl.dirty)" class="errorMessage">
                Scope Name Required!
            </span>
        </div>
    </div>

    ...