ユーザーがテキストボックスの値をクリアした後にのみ角2のカスタムフォームの検証が機能する

Question

入力ボックスがぼやけた直後に入力ボックスを検証しようとしています。しかし、いくつかの検証メッセージは、テキストボックスに何かを書き込んだり、削除したりするときにのみ表示されます。

ここに私のHTMLテンプレートがあります。

<input type="text" 
 
placeholder="First Name" 
 
class="form-control" 
 
name="firstName" 
 
id="firstName"          
 
[ngModel]="typeValidation.firstName" 
 
#firstName="ngModel" 
 
(blur)="firstNameBlur(firstName.value)" 
 
autofocus 
 
required> 
 
              
 
<small [hidden]="firstName.valid || (firstName.pristine && !f2.submitted)" class="text-danger"> 
 
    First Name is required. 
 
</small>

ここに私のtypescriptですです。

firstNameBlur(value:string) { 

    if (value == "" || value == undefined) { 
     return false; 
    } 
    else { 
     return true; 
    } 

} 

私を助けてください。 ありがとうございます！

Answer 1

は、あなたがこのように、 pristineの代わりに untouchedを使用する必要があり、あなたが期待どおりに操作できるようにするに

WORKING DEMO

(blur)は必要ありません。

Answer 2

ぼかしイベントにバインドする理由がわかりません。必要な属性は、ユーザがフィールドを離れるときに必要なフィールドをAngularが自動的に検証するようにする必要があります。

そのコードは何ですか？ firstNameBlur()がイベントで実行されているため、falseを返すとpreventDefaultが設定されます。 （このリンク：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefaultを参照してください）それは意図されているのでしょうか？

ブラーイベントを削除して、それがなくても動作するかどうかを確認してください。もしそうなら、firstNameBlurメソッドは必要ありません。

<small [hidden]="firstName.valid || (firstName.untouched && !f2.submitted)" 
     class="text-danger"> 
    First Name is required. 
</small> 

または* ngIf使用（私見は、それは本当に良いでしょう）：：

<small *ngIf="firstName.invalid && (firstName.touched || f2.submitted)" 
     class="text-danger"> 
    First Name is required. 
</small>