表单中的最小长度验证不起作用答案

【问题标题】：Minlength validation in form is not working表单中的最小长度验证不起作用
【发布时间】：2016-12-17 14:54:26
【问题描述】：

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

姓名是必填项

至少应为 4 长度

如果我稍后输入 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>

【问题讨论】：

标签： javascript html angular forms angular2-forms

【解决方案1】：

minlength='4' 不会设置可以在 html 中使用的角度变量。我假设您想检查secondName 的长度是否大于3，在这种情况下您可以将*ngIf 写为
```
<div *ngIf='secondName.length < 4'>
   min length should be 4
</div>
```
使用[(ngModel)] 绑定secondName 而不是ngControl
```
<input type="text" [(ngModel)]="secondName" >
```

【讨论】：

我只是想知道为什么会这样
@blackHawk 因为minlength 没有在任何地方设置，因此将在ngIf 中评估为false

【解决方案2】：

我不确定这是否是导致问题的原因，但我认为 class="for-control" required 应该是 class="form-control" required

【讨论】：