无法显示验证消息-角度6

Question

我正在处理Angular 6反应形式，面对验证问题，详细内容如下。 1）我只能够显示用户名必填消息。其他显示为空白的警告框。请检查以下图片。 我不明白问题出在哪里。

我也无法添加组件的类型脚本代码。将其发布到图像中

HTML代码

<div class="signUpForm">
  <p class="formHeader">Enter Your Details</p>
  <form class="container" [formGroup]="signUpForm">
    <input type="text" name="userName" formControlName="userName" placeholder="UserName" ng-minlength="3" ng-maxlength="5" required>
    <div *ngIf="signUpForm.controls['userName'].invalid && (signUpForm.controls['userName'].dirty || signUpForm.controls['userName'].touched)" class="alert alert-danger">
      <span *ngIf="userName.errors.minLength=">length must be greater than 3 </span>
      <div *ngIf="userName.errors.required">
        <p>UserName is required</p>
      </div>
      <p *ngIf="userName.errors.maxLength">UserName length must be less than 5 </p>
    </div>
    <input type="text" name="password" formControlName="password" placeholder="Password" required>
    <div *ngIf="signUpForm.controls['password'].invalid && (signUpForm.controls['password'].dirty || signUpForm.controls['password'].touched)" class="alert alert-danger">
      <div *ngIf="signUpForm.controls['password'].errors.required">
        password is required.
      </div>
    </div>
    <input type="text" name="confirmPassword" formControlName="confirmPassword" placeholder="Confirm Password" required>
    <div *ngIf="signUpForm.controls['confirmPassword'].invalid && (signUpForm.controls['confirmPassword'].dirty || signUpForm.controls['confirmPassword'].touched)" class="alert alert-danger">
      <div *ngIf="signUpForm.controls['confirmPassword'].errors.required">
        password is required.
      </div>
    </div>

] 4 [TS代码] 5

Answer 1

错误属性为 maxlength 和 minlength ，而不是 minLength 和 maxLength 。 HTML代码如下所示。

<div *ngIf="signUpForm.controls.userName.errors?.maxlength">length must be less than 6 character!</div>

请阅读更多信息：https://angular.io/guide/form-validation

我也做了一个小的工作代码段。请仔细阅读并了解更多信息。 https://stackblitz.com/edit/angular-ybal5b