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'));">

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

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

Answer 1

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

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

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

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

#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>

    ...

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

1 个答案: