自定义下拉验证显示问题-Angular2答案

【问题标题】：custom dropdown validation display issue-Angular2自定义下拉验证显示问题-Angular2
【发布时间】：2017-11-26 21:58:16
【问题描述】：

我正在使用primeng下拉菜单..并使用反应式表单验证..一切正常，但错误消息的显示方式不正确

验证消息显示在页面加载上。因为我编写了以下代码。关于我的代码有什么建议吗？或其他更好的方法来做到这一点。

<input type="password" class="form-control" name="ClientUserPassword" placeholder="Enter Password"
                                                           [(ngModel)]="objClientUserDetails.ClientUserPassword"
                                                           [ngClass]="{'error':!formClientUser.controls['ClientUserPassword'].valid && (formClientUser.controls['ClientUserPassword'].dirty
                                                           ||formClientUser.controls['ClientUserPassword'].touched)
                                                           || (objClientUserDetails.ClientUserPassword == '' ||
                                                            objClientUserDetails.ClientUserPassword == undefined)}"
                                                           [formControl]="formClientUser.controls['ClientUserPassword']" />

                                                    <div *ngIf="objClientUserDetails.ClientUserPassword == '' || (formClientUser.controls['ClientUserPassword'].hasError('required') &&
                                                                formClientUser.controls['ClientUserPassword'].touched)" class="alert alert-danger">
                                                        Please Enter Password
                                                    </div>

<p-dropdown [options]="listOfClientUserRoles"
                                                                [filter]="true"
                                                                placeholder="Select Role"
                                                                formControlName="cboClientUserRole"
                                                                [(ngModel)]="objClientUserDetails.StrClientUserRoleId"
                                                                (onChange)="OnRoleChangeChange($event)"></p-dropdown>

                                                    <div *ngIf="objClientUserDetails.StrClientUserRoleId=='0'|| ((formClientUser.controls['cboClientUserRole'].hasError('required')) &&( formClientUser.controls['cboClientUserRole'].touched))"
                                                         class="alert alert-danger">Please select Role</div>

【问题讨论】：

加载时可能是“StrClientUserRoleId === 0”？

标签： angular angular2-forms primeng angular-validation

【解决方案1】：

改变

<div *ngIf="objClientUserDetails.StrClientUserRoleId=='0'|| ((formClientUser.controls['cboClientUserRole'].hasError('required')) &&( formClientUser.controls['cboClientUserRole'].touched))">

到

<div *ngIf="formClientUser.controls['cboClientUserRole'].touched && (objClientUserDetails.StrClientUserRoleId=='0' || formClientUser.controls['cboClientUserRole'].hasError('required'))">

你可能想先检查它是否被触摸，然后检查值 0 或错误required。

【讨论】：