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

Question

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

<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

您将表单模型（即表单中包含值 entered/selected 的字段）与所使用的 FormGroups 和 FormControls 的内部结构混淆了通过表格。

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

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

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

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

您还使用相同的变量 userrole 来做两件不同的事情：一次作为您第一个 select 盒子的模型：

[(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>

    ...

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

How to display multiple error messages on form submit?

validation

form-submit

angular