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

Question

我正在使用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>

Answer 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。