表單中的最小長度驗證不起作用

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