javascript - 表单中的最小长度验证不起作用

Question

我试图理解，如果我像这样编写验证，为什么它不起作用并给我奇怪的结果，如果我稍后输入 3 而不是 4 并移动到下一个字段，它会运行两个 div

Name is required

Should be min 4 length

如果我稍后输入 4 并继续移动，则显示的长度应该是 4

<div class="form-group">
    <lable for="secondName">Second Name</lable>
    
    <input type="text" 
        ngControl='secondName'
        #secondName='ngForm' 
        id="secondName" 
        class="for-control" required
        minlength='4'>
   
    <div *ngIf='secondName.touched'>
    
    <div *ngIf='!secondName.valid'>
        Second Name is required
    </div>

    <div *ngIf='!minlength'>
        min length should be 4
    </div>
</div>

Answer 1

• minlength='4' 不会设置可在 html 中使用的 Angular 变量。我假设您想要检查 secondName 的长度是否大于 3，在这种情况下，您可以将 *ngIf 编写为

  <div *ngIf='secondName.length < 4'>
     min length should be 4
  </div>
  

• 使用[(ngModel)]绑定(bind)secondName而不是ngControl

  <input type="text" [(ngModel)]="secondName" >