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

Question

我试图理解，如果我这样写验证，为什么它不起作用并给我奇怪的结果，如果我稍后输入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>

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="for-control" required class="form-control" required