Question

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

名称是必需的

应该是min 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>

Answer 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" >
```

Answer 2

我不确定这是否是造成问题的原因，但我相信class="for-control" required应为class="form-control" required

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

2 个答案: